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.
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 |
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'
]
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.
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,
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>
Un buen lugar para comenzar en el documento de Highcharts sería aquí .
Maneras de obtener Highcharts:
npm install highcharts
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.