Highcharts es una biblioteca de gráficos de JavaScript de nivel empresarial basada en SVG. Fue lanzado por primera vez en 2009 por Highsoft en Vik, Noruega.

Highcharts admite una larga lista de diferentes tipos de gráficos, incluidos line, spline, area, areaspline, column, bar, pie, scatter, scatter3d, heatmap, treemap, gaugey casi todos los tipos de gráficos. Viene con excelente documentación e innumerables ejemplos. Es potente con una curva de aprendizaje baja. El único inconveniente es que la licencia es propietaria. Es gratis para uso personal/no comercial, pero hay que pagar para aplicaciones comerciales.

Junto con D3.js , Highcharts domina la aplicación de gráficos. Echemos un vistazo a cómo funciona.

Configurar el entorno de trabajo

Vamos a usar la aplicación Create React para explorar Highcharts. El siguiente comando crea un proyecto React:

% yarn create react-app react-highcharts
% cd react-highcharts

• highcharts: Es la biblioteca de gráficos de JavaScript.
• highcharts-react-official: Es el envoltorio oficial compatible con Highcharts para React.

% yarn add highcharts highcharts-react-official

"dependencies": {
  "highcharts": "^10.3.2",
  "highcharts-react-official": "^3.1.0"
}

<HighchartsReact highcharts={Highcharts} options={option} />

series: [
  {
    data: [1, 2, 1, 4, 3, 6],
  },
  {
    data: [2, 7, 0, 4, 6, 2],
  },
]

div {
  display: flex;
  flex-wrap: wrap;
}

• En las líneas 6 a 28, se crea una configuración de gráfico. – En las líneas 7–11, se definen
  los gráficos type, widthy . – En las líneas 12 a 14, el título del gráfico se compone del tipo. Como lodash viene con la aplicación Create React , se llama para que cada letra inicial esté en mayúscula. – En las líneas 15 a 19, el eje Y, o eje de valores, está configurado con un . – En las líneas 20–27, se crean dos series de datos.height
_.startCase
yAxistitle
  
• En las líneas 33 a 40, cada línea crea un gráfico con el tipo especificado:
  – line(línea 33): el gráfico de líneas está representado por una serie de puntos de datos conectados con una línea recta.
  – spline(línea 34): el gráfico spline dibuja una línea curva entre los puntos de una serie de datos.
  – area(línea 35): el gráfico de áreas funciona de la misma manera que un gráfico de líneas, excepto que llena el área entre la línea y el umbral, que es 0 de forma predeterminada.
  – areaspline(línea 36): El gráfico de spline de áreas es el mismo que el gráfico de áreas, excepto que la línea es una spline en lugar de una línea recta.
  – column(línea 37): el gráfico de columnas muestra los datos como barras verticales.
  –bar(línea 38): El gráfico de barras es el mismo que el gráfico de columnas, excepto que se intercambian los ejes X e Y.
  – pie(línea 39): El gráfico circular es un gráfico circular dividido en sectores, que es proporcional a la cantidad que representa.
  – scatter(línea 40): el gráfico de dispersión dibuja un punto para cada punto de datos sin conectarlos.

Ejemplo 2: Gráfico de créditos y menú de exportación

Mira la captura de pantalla de arriba. De forma predeterminada, Highcharts coloca una etiqueta/enlace de créditos en la esquina inferior derecha del gráfico.

El texto y el enlace se pueden configurar. Y aquí hay un ejemplo:

credits: {
  text: 'My Credits',
  href: 'https://jenniferfubook.medium.com/jennifer-fus-web-development-publications-1a887e4454af',
}

credits: {
  enabled: false,
}

Este módulo se puede incluir en una línea de código.

require('highcharts/modules/exporting')(Highcharts);

import HighchartsExporting from 'highcharts/modules/exporting';
HighchartsExporting(Highcharts);

Aquí está el modificado src/App.js:

• En las líneas 5 y 6, se carga el módulo de exportación.
• En las líneas 30 a 32, se desactivaron los créditos predeterminados.

En el gráfico de líneas, haga clic en el Print chartelemento del menú y aparecerá un modal para imprimir el gráfico o guardarlo como un archivo PDF.

En el gráfico de líneas, haga clic en el Download PNG imageelemento del menú y se guardará un archivo PNG en la Downloadscarpeta.

Cada gráfico se puede guardar en formato JPEG, PDF o SVG.

Ejemplo 3: gráficos básicos en vista 3D

highcharts-3des un módulo de Highcharts que proporciona soporte 3D. Debe importarse para crear gráficos 3D.

Este módulo se puede incluir en una línea de código.

require('highcharts/highcharts-3d')(Highcharts);

import Highcharts3D from 'highcharts/highcharts-3d';
Highcharts3D(Highcharts);

• options3dconfigura la opción 3D. La bandera, enabled, habilita un gráfico 3D. alphay betason los ángulos para rotar la vista del gráfico y depthdefine la profundidad total con un valor predeterminado de 100. Aquí hay un ejemplo:

options3d: {
  enabled: true,
  alpha: 15,
  beta: 30,
  depth: 300,
}

• Los datos del gráfico pueden estar en un formato diferente para cada tipo. xAxisdefine el eje X o el eje de categoría. Para nuestros ejemplos 3D, xAxisse definen tres para parcelas a diferentes profundidades, aunque estas xAxisen sí mismas no son visibles.

• En las líneas 6 y 8 se carga el módulo 3D de Highcharts.
• En las líneas 13 a 18, options3dhabilita los gráficos 3D y configura los ángulos de rotación y la profundidad.
• En las líneas 28 a 38, tres xAxisse configuran como invisibles.
• En las líneas 39 a 43, plotOptions.[type].depthse establece en 100.
• En las líneas 44–57, seriesdefine gráficas para xAxis 0, xAxis 1y xAxis 2. Cada parcela tiene seis puntos.

Aquí hay algunas observaciones de la captura de pantalla anterior:

• line, , y los gráficos se muestran muy bien en splinela vista 3D.areacolumnbar
• No areasplinegira la vista, ya que el tipo 3D no es oficialmente compatible.
• El piegráfico funciona, pero apilar tres pasteles uno sobre el otro es complicado. Simplificándolo a un pastel hace que se vea mejor:

series: [
  {
    data: [2, 2, 1, 4, 3, 2],
  },
]

       
                

                    
                    
                
            

const getOptions = (type) => ({
  chart: {
    type: 'scatter3d',
    options3d: {
      enabled: true,
      alpha: 15,
      beta: 30,
      depth: 300,
    },
  },
  title: {
    text: _.startCase(`${type} chart`),
  },
  yAxis: {
    title: {
      text: 'Values',
    },
  },
  series: [
    {
      data: [[0, 2, 0], [1, 2, 0], [2, 1, 0], [3, 4, 0], [4, 3, 0], [5, 2, 0]],
    },
    {
      data: [[0, 4, 100], [1, 3, 100], [2, 6, 100], [3, 5, 100], [4, 4, 100], [5, 6, 100]],
    },
    {
      data: [[0, 5, 200], [1, 7, 200], [2, 7, 200], [3, 6, 200], [4, 7, 200], [5, 7, 200]],
    },
  ],
  credits: {
    enabled: false,
  },
});

zAxis: {
  showFirstLabel: false
}

Ejemplo 4: gráficos de mapas de calor

Un mapa de calor es una representación gráfica de datos donde los valores individuales contenidos en una matriz se representan como colores.

El gráfico de mapa de calor requiere que se importe el módulo de mapa de calor. Se puede lograr con una línea de código:

require('highcharts/modules/heatmap')(Highcharts);

import HighchartsHeatmap from 'highcharts/modules/heatmap';
HighchartsHeatmap(Highcharts);

xAxis: {
  categories: ['A', 'B', 'C', 'D', 'E', 'F'],
}

yAxis: {
  categories: ['Apple', 'Banana', 'Pear'],
}

data: [
  [0, 0, 5], [0, 1, 8], [0, 2, 9],
  [1, 0, 3], [1, 1, 6], [1, 2, 2],
  [2, 0, 7], [2, 1, 1], [2, 2, 9],
  [3, 0, 4], [3, 1, 5], [3, 2, 1],
  [4, 0, 8], [4, 1, 6], [4, 2, 7],
  [5, 0, 7], [5, 1, 3], [5, 2, 4],
]

colorAxis: {
  min: 0,
  minColor: '#FF0000',
  maxColor: '#0000FF',
}

Aquí está el modificado src/App.js:

• En las líneas 6 y 8, se carga el módulo de mapa de calor.
• En la línea 13, agregue plotBorderWidthpara separar las áreas del mapa de calor.
• En las líneas 18–20, xAxisse define con 6 categories.
• En las líneas 21–25, yAxisse define con 3 categories. titleestá apagado (línea 23), y categoriesse muestra en un reversedorden.
• En las líneas 26 a 30, colorAxisse define como un degradado de color desde el blanco (línea 28) hasta el color de la primera serie (línea 29). colorAxisreemplaza las etiquetas predeterminadas para series.
• En las líneas 31–45, datase define y dataLablespermite mostrar el valor del mapa de calor en cada área.
• En la línea 53, se crea el gráfico de mapa de calor.

Ejemplo 5: Gráficos de mapa de árbol

Un mapa de árbol es una representación gráfica de datos donde los datos jerárquicos se muestran mediante figuras anidadas, generalmente rectángulos.

El gráfico de mapa de árbol requiere que se importe el módulo de mapa de árbol. Se puede hacer con una línea de código:

require('highcharts/modules/treemap')(Highcharts);

import HighchartsTreemap from 'highcharts/modules/treemap';
HighchartsTreemap(Highcharts);

data: [
  {
    id: 'parentId',
    name: 'Parent',
    color: '#FF0000',
  },
  {
    name: 'child1',
    parent: 'parentId',
    value: 3,
  },
  {
    name: 'child2',
    parent: 'parentId',
    value: 5,
  },
]

• En las líneas 6 y 8, se carga el módulo de diagrama de árbol.
• En la línea 16, typese especifica en series, en lugar de chart.
• En la línea 17, layoutAlgorithmse establece en 'sliceAndDice’, que es el comportamiento predeterminado de dividir el área en partes más pequeñas.
• En las líneas 18 a 79, datadefine los datos jerárquicos, que definen tres padres, Red(líneas 19 a 23), Green(líneas 24 a 28) y Blue(líneas 29 a 33). Redtiene hijos (líneas 34–48), Greentiene dos hijos (líneas 49–58) y Bluetiene cuatro hijos (líneas 59–78).
• En la línea 89, se crea el gráfico de diagrama de árbol.

Cambia layoutAlgorithma 'stripes’, y vemos que las áreas se dividen en tiras:

Cambie layoutAlgorithma 'squarified’o 'strip’, y vemos que las áreas se dividen en las siguientes formas:

Ejemplo 6: Gráficos de indicadores

Un gráfico de indicadores también se denomina gráfico de velocímetro o gráfico de marcación. El gráfico tiene una aguja que apunta a un cierto valor sobre el punto de pivote. Es una visualización eficaz para evaluar el rendimiento, realizar un seguimiento del progreso y facilitar la toma de decisiones.

El gráfico de indicadores requiere highcharts-moreque se importe el módulo. Se puede hacer con una línea de código:

require('highcharts/highcharts-more')(Highcharts);

import HighchartsMore from 'highcharts/highcharts-more';
HighchartsMore(Highcharts);

yAxis: {
  min: 0,
  max: 100,
},
series: [
  {
    data: [80],
  },
]

• En las líneas 6 y 8, highcharts-morese carga.
• En las líneas 17–23, yAxisestablece miny maxen 0 y 100. yAxis.title.text se establece en 'Speed'.
• En las líneas 24 a 28, series.datase establece en 80.
• En la línea 36, ​​se crea el gráfico de indicador.

Se puede definir un gráfico de indicadores para cualquier arco con pane.startAngley pane.endAngle. Cuando no es un círculo completo, pane.backgrounddebe establecerse en null. También es una buena idea ajustar el centro a la posición [x, y].

pane: {
  startAngle: -90,
  endAngle: 89.9,
  background: null,
  center: ['50%', '70%'],
}

Podemos diseñar las bandas de calibre en función de yAxislos valores.

yAxis: {
    min: 0,
    max: 100,
    title: {
      text: 'Speed',
    },
    plotBands: [
      {
        from: 0,
        to: 25,
        color: '#FF0000',
        thickness: 15,
      },
      {
        from: 25,
        to: 80,
        color: '#00FF00',
        thickness: 15,
      },
      {
        from: 80,
        to: 100,
        color: '#0000FF',
        thickness: 15,
      },
    ],
  }

Parece que el punto de pivote está demasiado cerca del número.

Redimensionamos la banda al 120% del tamaño:

pane: {
  startAngle: -90,
  endAngle: 89.9,
  background: null,
  center: ['50%', '70%'],
  size: '120%',
}

Ejemplo 7: Accesibilidad del gráfico

Ejecute ejemplos de gráficos y vemos la siguiente advertencia en la consola.

highcharts.src.js:223Advertencia de Highcharts: considere incluir el módulo "accessibility.js" para que su gráfico sea más útil para las personas con discapacidades. Establezca la opción "accessibility.enabled" en falso para eliminar esta advertencia. Verhttps://www.highcharts.com/docs/accessibility/accessibility-module.

Inspeccione los elementos del gráfico y no vemos información de accesibilidad.

La accesibilidad hace que las aplicaciones web sean utilizables por personas cuyas capacidades están limitadas de alguna manera, como la visión (usando un lector de pantalla) y la movilidad (usando solo el teclado). Además, las limitaciones podrían provenir de la capacidad del dispositivo, como los dispositivos móviles. Es muy importante que el software empresarial sea accesible .

El módulo de accesibilidad se puede importar mediante una línea de código:

require('highcharts/modules/accessibility')(Highcharts);

import HighchartsAccessibility from 'highcharts/modules/accessibility';
HighchartsAccessibility(Highcharts);

• En las líneas 7 y 10 se carga el módulo de accesibilidad.
• En las líneas 19–22, accessibilitydefine un description.

Hay mucha información de accesibilidad en la captura de pantalla anterior, incluida la descripción de accesibilidad que hemos especificado:

<div aria-hidden="false" style="position: absolute; width: 1px; height: 1px; overflow: hidden; white-space: nowrap; clip: rect(1px, 1px, 1px, 1px); margin-top: -3px; opacity: 0.01;">
  <p>Gauge Chart</p>
  <div>Chart with 1 data point.</div>
  <div>The gauge chart shows the performance speed between 0 and 100.</div>
  <div>The chart has 1 Y axis displaying Speed. Data ranges from 80 to 80.</div>
</div>

Conclusión

Hemos mostrado siete ejemplos de Highcharts en React, que incluyen 12 tipos de gráficos de line, spline, area, areaspline, column, bar, pie, scatter, scatter3d, heatmap, treemapy gauge.

También hemos escrito artículos sobre otros tipos de Highcharts:

• En este artículo , bubble, packedbubble, streamgraphy cylinder.
• En este artículo , sankeydiagram, arcdiagram, dependencywheely networkgraph.
• En este artículo : parallelCoordinates.

Gracias por leer.

Want to Connect? 

If you are interested, check out my directory of web development articles.