Primeros pasos con gráficos altos

Instalación o Configuración

Formas de obtener Highcharts:

  • Cargar directamente desde Highcharts CDN

  • Descargar archivos del sitio web oficial.

  • A través de npm;

    npm install highcharts

  • A través de la glorieta;

    bower install highcharts


Para cargar la biblioteca principal desde la CDN del proveedor, simplemente agregue lo siguiente a su código:

<script src="https://code.highcharts.com/highcharts.js"></script>

Las bibliotecas complementarias, como el módulo de exportación, deben cargarse después de su declaración highcharts.js.

Llamar a las bibliotecas directamente desde Highcharts le proporcionará la versión más actualizada. Sin embargo, si tiene gráficos específicos que funcionan mejor con una determinada versión o desea optimizar el rendimiento de su sitio web, puede considerar almacenar los archivos localmente.

Los siguientes recursos ofrecen información detallada sobre la instalación y configuración de Highcharts, así como bibliotecas y módulos complementarios que puede usar para personalizar sus gráficos más allá de la instalación predeterminada.

Hola Mundo

Comience por incluir highcharts.js en su index.html

<html>
  <head>
    <script src="http://code.highcharts.com/highcharts.js"></script>
  </head>

Agregue un <div> para contener su gráfico

  <body>
    <div id="chart">
      <!-- Chart goes here -->
    </div>

Especifique la configuración para crear el gráfico. La configuración mínima requerida para crear un gráfico es:

  • ¿Adónde va el gráfico? - gráfico.renderTo

  • ¿Cuáles son los datos a graficar? - Hay algunas formas de introducir los datos que se van a graficar; el más común entre ellos es el objeto serie.

      var chartOptions = {
          chart: {
              renderTo: 'chart'  
          },
          series: [{      
              data: [1, 2]
          }]  
      };
      var chartHandle = Highcharts.Chart(chartOptions);
    

Esto crea una trama de la siguiente manera: violín.

Existen numerosas opciones de configuración que se pueden agregar al gráfico, siendo algunas de las más comunes,

  • chart.type - ¿Qué tipo de gráfico desea trazar?
  • título - Configuración para el título del gráfico
  • xAxis/yAxis - Configuración para el eje x/eje y del gráfico

Puede encontrar una lista completa de todas las opciones de configuración aquí.

    <script>
    var chartOptions = {
      chart: {
        renderTo: 'chart',
        type: 'bar'
      },
      title: {
        text: 'Hello Highcharts'
      },
      xAxis: {
        categories: ['Hello', 'World']
      },
      yAxis: {
        title: 'Value'
      },
      series: [{
        name: 'Highcharts Intro',
        data: [1, 2]
      }]
    };

    var chart = new Highcharts.Chart(chartOptions);
    
    </script>
  </body>
</html>

Ejemplo JSFiddle

Un buen lugar para comenzar en el documento de Highcharts sería aquí.

Colores

En Highcharts, hay una matriz que contiene los colores predeterminados para la serie del gráfico. Cuando se utilizan todos los colores, se extraen nuevos colores desde el principio.

Los colores predeterminados para versiones 4.x y 5.x son:

colors: [
    '#7cb5ec', 
    '#434348', 
    '#90ed7d', 
    '#f7a35c', 
    '#8085e9', 
    '#f15c80', 
    '#e4d354', 
    '#2b908f', 
    '#f45b5b', 
    '#91e8e1'
]

En Highcharts 3.x, los colores predeterminados eran:

colors: [
    '#2f7ed8', 
    '#0d233a', 
    '#8bbc21', 
    '#910000', 
    '#1aadce', 
    '#492970', 
    '#f28f43', 
    '#77a1e5', 
    '#c42525', 
    '#a6c96a'

]

En Highcharts 2.x, los colores predeterminados eran:

colors: [
    '#4572A7', 
    '#AA4643', 
    '#89A54E', 
    '#80699B', 
    '#3D96AE', 
    '#DB843D', 
    '#92A8CD', 
    '#A47D7C', 
    '#B5CA92'
]

Compatibilidad

Marca Versiones compatibles
Explorador de Internet 6.0 +
Firefox 2.0 +
cromo 1.0 +
safari 4.0 +
Ópera 9.0 +
iOS (Safari) 3.0 +
Navegador Android 2.0 +

Highcharts admite jQuery versión 1.6+ para navegadores heredados y 2.0+ para navegadores modernos navegadores