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>
Un buen lugar para comenzar en el documento de Highcharts sería aquí .
Instalación o configuración
Maneras de obtener Highcharts:
- Cargar directamente desde Highcharts CDN
- Descarga los 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 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.
- Instrucciones de instalación para Highcharts
- Vista general del módulo de exportación
- Servicio de archivos de Highcharts, incluyendo todos los módulos y versiones.
