Looking for highcharts Answers? Try Ask4KnowledgeBase
Looking for highcharts Keywords? Try Ask4Keywords

highchartsEmpezando con Highcharts


Observaciones

Highcharts es una biblioteca de gráficos de JavaScript que se puede configurar utilizando opciones en formato JSON. Admite una amplia gama de tipos de gráficos de forma predeterminada, y también permite complementos. También es el núcleo de varios productos secundarios como Highstock y Highmaps.

Highcharts es gratuito para uso no comercial y personal, con licencias solo necesarias para aplicaciones comerciales.

Versiones

Versión Fecha de lanzamiento
5.0.0 2016-09-29
4.0.0 2014-04-22
3.0.0 2013-03-22
2.0.0 2010-07-13
1.0.0 2009-11-27

Colores

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

Los colores predeterminados para la versión 4.xy 5.x son:

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

En Highcharts 3.x , los colores por defecto fueron:

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

]

En Highcharts 2.x , los colores por defecto fueron:

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

Compatibilidad

Marca Versiones soportadas
explorador de Internet 6.0 +
Firefox 2.0 +
Cromo 1.0 +
Safari 4.0 +
Ópera 9.0 +
iOS (Safari) 3.0 +
Navegador de Android 2.0 +

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

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:

  • ¿A dónde va la tabla? - chart.renderTo

  • ¿Cuál es la información a trazar? - Hay algunas formas de alimentar los datos que se van a trazar; El más común entre ellos es el objeto de la 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, algunas de las cuales son comunes,

  • chart.type - ¿Qué tipo de gráfico quieres 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

Una lista completa de todas las opciones de configuración se puede encontrar 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 de JSFiddle

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

Instalación o configuración

Maneras de obtener Highcharts:

npm install highcharts
 
  • A través de la glorieta
bower install highcharts
 

Para cargar la biblioteca principal desde el 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 si 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 suplementarios que puede usar para personalizar sus gráficos más allá de la instalación predeterminada.