Recientemente he utilizado la biblioteca de gráficos Highcharts en un proyecto, específicamente las funcionalidades de gráficos de líneas y de pastel. A cotninuación, comparto mi experiencia y guía de uso para facilitar su implementación.
Comencemos observando un gráfico de ejemplo:
El gráfico anterior muestra información de seis ubicaciones diferentes. Analicemos estos componentes:
Elemento 1: Título principal del gráfico
Elemento 2: Subtítulo del gráfico
Elemento 3: Opciones de exportación
Elemento 4: Leyenda del gráfico
Elemento 5: Créditos y derechos de autor
Elemento 6: Cuadro de información emergente (se muestra al pasar el mouse o hacer clic)
Aquí está el código de implementación:
1 /**
2 * Highcharts desde la versión 4.2.0 ya no depende de jQuery,
3 * podemos crear gráficos directamente con su constructor
4 */
5 var miGrafico = new Highcharts.Chart('contenedor', {
6 title: {
7 text: 'Temperatura Mensual Promedio por Ciudad', // Elemento 1. Título del gráfico
8 x: -20 // Posición del título
9 },
10 subtitle: {
11 text: 'Fuente: WorldClimate.com', // Elemento 2. Subtítulo
12 x: -20
13 },
14 xAxis: { // Datos del eje X
15 categories: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
16 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre']
17 },
18 yAxis: { // Datos del eje Y
19 title: { // Título del eje Y
20 text: 'Temperatura (°C)'
21 },
22 /**
23 plotLines: [{
24 className:
25 color: undefined
26 dashStyle: Estilo de línea
27 events: Eventos
28 id: Identificador
29 label: {Etiqueta}
30 value: Valor
31 width: Ancho
32 zIndex: Índice de apilamiento
33 }]
34 */
35 plotLines: [{ // Líneas de referencia
36 value: 0,
37 width: 1,
38 color: '#808080'
39 }]
40 },
41 tooltip: { // Elemento 6. Cuadro emergente
42 valueSuffix: '°C' // Sufijo del valor
43 },
44 legend: { // Elemento 4. Leyenda
45 layout: 'vertical', // Diseño de leyenda
46 align: 'right',
47 verticalAlign: 'middle',
48 borderWidth: 0,
49 enabled: true // Mostrar/ocultar leyenda
50 },
51 /**
52 credits: {
53 enabled: Habilitado
54 href: Enlace
55 position: {Posición}
56 style: Estilo
57 text: Contenido
58 }
59 */
60 credits:{ // Elemento 5. Créditos
61 enabled: true
62 },
63 exporting:{
64 enabled: true // Elemento 3. Exportación
65 },
66 series: [{
67 name: 'Tokio',
68 data: [5.0, 7.9, 11.5, 16.5, 20.2, 23.5, 27.2, 29.5, 25.3, 19.3, 14.9, 8.6]
69 }, {
70 name: 'Nueva York',
71 data: [-2.2, 1.8, 6.7, 12.3, 18.0, 23.0, 26.8, 25.1, 21.1, 15.1, 9.6, 3.5]
72 }, {
73 name: 'Berlín',
74 data: [-2.9, 1.6, 4.5, 9.4, 14.5, 18.0, 19.6, 18.9, 15.3, 10.0, 4.9, 2.0]
75 }, {
76 name: 'Londres',
77 data: [2.9, 5.2, 6.7, 9.5, 12.9, 16.2, 18.0, 17.6, 15.2, 11.3, 7.6, 5.8]
78 }]
79 });
Generalmente, los elementos 2, 3, 4 y 5 no son necesarios, por lo que podemos eliminarlos.
Para el subtítulo:
1 subtitle: {
2 text: 'Fuente: WorldClimate.com', // Elemento 2. Subtítulo
3 x: -20
4 },
Podemos eliminar este bloque completamente.
Para los elementos 3, 4 y 5, como están habilitados por defecto (true), debemos cambiarlos a false si no los necesitamos.
Veamos el resultado sin estos elementos:
Ahora, si observamos el cuadro emergente, muestra información como "Julio" y "Nueva York". Si deseamos personalizar este formato, por ejemplo, mostrar "Mes de julio" sin saltos de línea, podemos modificarlo así:
1 tooltip: {
2 valueSuffix: '°C', // Sufijo del valor
3 headerFormat: '<div style="text-align: center">Mes actual: {point.key}</div><br/>',
4 },
Si no queremos el salto de línea, simplemente eliminamos el <br/> al final.
Este es el resultado con el formato personalizado:
Para obtener más información, recomiendo consultar la documentación oficial: https://api.hcharts.cn/highcharts#exporting
Allí encontrarán detalels muy claros sobre todas las opciones disponibles.