Introducción

Highcharts es una biblioteca de gráficos de JavaScript de nivel empresarial basada en SVG. Viene con excelente documentación e innumerables ejemplos. El único inconveniente es que la licencia es propietaria. Es gratis para uso personal/no comercial, pero debe pagar para aplicaciones comerciales.

En un artículo anterior , presentamos Highcharts y el entorno de trabajo para explorar Highcharts usando la aplicación Create React . Seguimos usando este entorno para probar el gráfico de coordenadas paralelas.

Como hemos explicado en el artículo anterior, se recomienda incluir las siguientes importaciones para cada gráfico:

import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import HighchartsExporting from 'highcharts/modules/exporting';
import HighchartsAccessibility from 'highcharts/modules/accessibility';

• highcharts-react-official: Es el envoltorio oficial compatible con Highcharts para React.
• highcharts/modules/exporting: Es el módulo de exportación de Highcharts que proporciona un menú con elementos de menú relacionados con la exportación a View in full screen, Print chart, Download PNG image, Download JPEG image, Download PDF documenty Download SVG vector image.
• highcharts/modules/accessibility: Es el módulo de accesibilidad de Highcharts que proporciona accesibilidad para el gráfico HTML generado.

Un gráfico de coordenadas paralelas es una forma común de visualizar y analizar conjuntos de datos de alta dimensión. La naturaleza de las coordenadas paralelas requiere al menos dos ejes, que pueden ser del mismo tipo o de diferentes tipos.

Los tipos de ejes compatibles con Highcharts son linear, logarithmic, y . Además de que se utiliza para gráficos de Gantt, todos los demás tipos de ejes están disponibles para un gráfico de coordenadas paralelas. El tipo de eje predeterminado es , que utiliza la escala lineal.datetimecategorytreegridtreegridlinear

El siguiente src/App.jses un ejemplo que muestra un gráfico de coordenadas paralelas con dos linearejes:

• En las líneas 5 y 8, highcharts/modules/parallel-coordinatesse carga, lo que se requiere para el gráfico de coordenadas paralelas.
• En las líneas 10 a 18, datase crea con 7 líneas, donde cada línea se compone de dos coordenadas.
• En las líneas 21 a 29, se define la configuración del gráfico.
  – En la línea 22, typese define como 'linear'.
  – En las líneas 23–24, widthy heightestán definidos.
  – En la línea 25, parallelCoordinatesse establece en verdadero.
  – En las líneas 26–28, todos los ejes paralelos están configurados con lineWidth2 (el valor predeterminado es 1).
• En las líneas 30 a 32, el título del gráfico se establece en 'Parallel Coordinates Chart'.
• xAxisEn las líneas 33 a 36, ​​se definen dos , que offsetserán 10.
• En las líneas 37 a 52, yAxisse definen dos.
  – En las líneas 38–44, la primera yAxises linear. mines 0 y maxes 10. Dado que startOnTickse establece en falso, miny maxlos valores se aplican estrictamente. reversedse establece en verdadero, de modo que el origen está en la parte superior.
  – En las líneas 45–51, el segundo yAxistambién es linear, con una configuración similar.
• En las líneas 53 a 56, seriesse calculan a partir de data(línea 10).
• En las líneas 57 a 59, se desactivaron los créditos predeterminados.
• En la línea 62, se crea un gráfico de coordenadas paralelas.

Pase el cursor sobre el lado izquierdo de la línea, muestra la coordenada del primer eje.

Pase el cursor sobre el lado derecho de la línea, muestra la coordenada del segundo eje.

Para cada línea, hay marcadores en dos extremos y podemos desactivarlos.

plotOptions: {
  series: {
    marker: {
      enabled: false,
      states: {
        hover: {
          enabled: false,
        },
      },
    },
  },
}

Gráfico de coordenadas paralelas con un eje lineal y un eje logarítmico

Cambiamos el segundo yAxisa logarithmic, que muestra datos numéricos en un rango muy amplio de valores de forma compacta. startOnTickse elimina, ya que los valores miny maxno se aplican de todos modos.

{
  type: 'logarithmic',
  min: 10,
  max: 100,
  s̶t̶a̶r̶t̶O̶n̶T̶i̶c̶k̶:̶ ̶f̶a̶l̶s̶e̶,̶
  startOnTick: false,
  reversed: true,
}

xAxis: {
  categories: ['Linear Values', 'Logarithmic Values'],
  offset: 10,
}

También podemos establecer todas las líneas en pink, y las líneas flotantes purpleen src/App.css:

.highcharts-series path {
  stroke: pink;
  stroke-width: 2px;
}
.highcharts-series-hover path {
  stroke: purple;
}

Ejecute yarn start, y vemos un gráfico de coordenadas paralelas con pinklíneas.

Y la línea suspendida es purple.

Cuando se pasa el cursor sobre una línea, las líneas que no se desplazan se desvanecen ( inactive). El efecto se logra configurando Highchats opacityen 0.2. Se puede apagar configurando opacitya 1 en src/App.css:

.highcharts-series-inactive {
  opacity: 1;
}

La opacityregla es solo ilustrativa, no la usamos para el resto de los ejemplos.

Gráfico de coordenadas paralelas con tres ejes

Creamos el tercero yAxispara ser datetime, que usa la escala de fecha y hora y muestra los valores de fecha y hora como etiquetas de eje en el formato especificado. Date.UTC(year, month, day, hours, minutes, seconds, milliseconds)puede obtener el tiempo en milisegundos para UTC (Universal Time Coordinated), el tiempo estándar global definido por el World Time Standard, conocido históricamente como Greenwich Mean Time.

Aquí está el tipo/rango de Date.UTCparámetros:

• year: entero
• month: 0–11
• day: 1–31
• hours: 0–23
• minutes: 0–59
• seconds: 0–59
• milliseconds: 0–999

const data = [
  [0, 30, Date.UTC(2023)], 
  [2, 45, Date.UTC(2022)], 
  [4, 20, Date.UTC(2022)], 
  [5, 33, Date.UTC(2020)], 
  [6, 60, Date.UTC(2019)],
  [8, 73, Date.UTC(2018)], 
  [9, 80, Date.UTC(2016)],
];

xAxis: {
  categories: ['Linear Values', 'Logarithmic Values', 'Years'],
  offset: 10,
}

{
  type: 'datetime',
}

El gráfico se ve bien hasta que nos desplazamos sobre una línea cerca del tercer eje. Muestra el valor de fecha y hora en milisegundos, en lugar del año.

Podemos configurar tooltippara usar formattedValue, en lugar del valor bruto:

tooltip: {
  pointFormat: '{series.name}: <b>{point.formattedValue}</b><br/>',
}

Un gráfico de coordenadas paralelas puede admitir tipos de lineo spline. Aquí está el modificado src/App.js, que establece el tipo de gráfico en spline(línea 23):

Ejecute yarn start, y vemos un gráfico de coordenadas paralelas con líneas curvas ( spline).

Gráfico de coordenadas paralelas con cuatro ejes

Creamos el cuarto yAxispara ser datetimetambién, pero lo hacemos para mostrar meses. Para mostrar las etiquetas de los meses de manera significativa, la distancia entre los valores debe estar separada por meses.

Desarrollamos datacon la cuarta coordenada de datetime:

const data = [
  [0, 30, Date.UTC(2023), Date.UTC(2023, 0)], 
  [2, 45, Date.UTC(2022), Date.UTC(2023, 2)], 
  [4, 20, Date.UTC(2022), Date.UTC(2023, 3)], 
  [5, 33, Date.UTC(2020), Date.UTC(2023, 4)], 
  [6, 60, Date.UTC(2019), Date.UTC(2023, 4)],
  [8, 73, Date.UTC(2018), Date.UTC(2023, 6)], 
  [9, 80, Date.UTC(2016), Date.UTC(2023, 8)],
];

xAxis: {
  categories: ['Linear Values', 'Logarithmic Values', 'Years', 'Months'],
  offset: 10,
}

{
  type: 'datetime',
  min: Date.UTC(2023, 0), // January
  max: Date.UTC(2023, 11), // December
  tickInterval: 24 * 3600 * 1000 * 30, // A month
  reversed: true,
  labels: {
    format: '{value:%B}', // long month format, like January
  },
}

• %a: Día de semana corto, comoMon
• %A: Día de semana largo, comoMonday
• %d: Día del mes de dos dígitos, 01 a 31
• %e: Día del mes, del 1 al 31
• %w: Día de la semana, 0 a 6
• %b: Mes corto, comoJan
• %B: Mes largo, comoJanuary
• %m: Número de mes de dos dígitos, del 01 al 12
• %y: Año de dos dígitos, como 09 para 2009
• %Y: Año de cuatro dígitos, como 2009
• %H: Horas de dos dígitos en formato de 24 horas, 00 a 23
• %k: Horas en formato de 24 horas, de 0 a 23
• %I: Horas de dos dígitos en formato de 12 h, 00 a 11
• %l: Horas en formato de 12h, 1 a 12
• %M: Minutos de dos dígitos, 00 a 59
• %p: Mayúsculas AM o PM
• %P: Minúsculas AM o PM
• %S: Segundos de dos dígitos, 00 a 59
• %L: Milisegundos

Ejecute yarn start, y vemos un gráfico de coordenadas paralelas con un lineareje, un logarithmiceje, un datetimeeje para Yearsy un datetimeeje para Months.

Gráfico de coordenadas paralelas con cinco ejes

Creamos el quinto yAxispara ser datetimetambién, pero lo hacemos para mostrar el tiempo. Para mostrar las etiquetas de tiempo de manera significativa, la distancia entre los valores debe estar separada por horas.

Desarrollamos datacon las quintas coordenadas de datetime:

const data = [
  [0, 30, Date.UTC(2023), Date.UTC(2023, 0), Date.UTC(2023, 0, 1, 8, 20, 30)], 
  [2, 45, Date.UTC(2022), Date.UTC(2023, 2), Date.UTC(2023, 0, 1, 9, 0, 0)], 
  [4, 20, Date.UTC(2022), Date.UTC(2023, 3), Date.UTC(2023, 0, 1, 7, 0, 0)], 
  [5, 33, Date.UTC(2020), Date.UTC(2023, 4), Date.UTC(2023, 0, 1, 12, 30, 0)], 
  [6, 60, Date.UTC(2019), Date.UTC(2023, 4), Date.UTC(2023, 0, 1, 14, 40, 10)],
  [8, 73, Date.UTC(2018), Date.UTC(2023, 6), Date.UTC(2023, 0, 1, 17, 0, 30)], 
  [9, 80, Date.UTC(2016), Date.UTC(2023, 8), Date.UTC(2023, 0, 1, 19, 45, 15)],
];

xAxis: {
  categories: ['Linear Values', 'Logarithmic Values', 'Years', 'Months', 'Time'],
  offset: 10,
}

{
  type: 'datetime',
  reversed: true,
  labels: {
    format: '{value:%l:%M:%S %p}', // time format, like 8:30:00 AM
  },
}

Ejecute yarn start, y vemos un gráfico de coordenadas paralelas con un lineareje, un logarithmiceje, un datetimeeje para Years, un datetimeeje para Monthsy un datetimeeje para Time.

Gráfico de coordenadas paralelas con seis ejes

Creamos el sexto yAxispara ser category, con 4 grupos (0–3).

Expande datacon las sextas coordenadas de category:

const data = [
  [0, 30, Date.UTC(2023), Date.UTC(2023, 0), Date.UTC(2023, 0, 1, 8, 20, 30), 0], 
  [2, 45, Date.UTC(2022), Date.UTC(2023, 2), Date.UTC(2023, 0, 1, 9, 0, 0), 0], 
  [4, 20, Date.UTC(2022), Date.UTC(2023, 3), Date.UTC(2023, 0, 1, 7, 0, 0), 1], 
  [5, 33, Date.UTC(2020), Date.UTC(2023, 4), Date.UTC(2023, 0, 1, 12, 30, 0), 2], 
  [6, 60, Date.UTC(2019), Date.UTC(2023, 4), Date.UTC(2023, 0, 1, 14, 40, 10), 2],
  [8, 73, Date.UTC(2018), Date.UTC(2023, 6), Date.UTC(2023, 0, 1, 17, 0, 30), 2], 
  [9, 80, Date.UTC(2016), Date.UTC(2023, 8), Date.UTC(2023, 0, 1, 19, 45, 15), 3],
];

xAxis: {
  categories: ['Linear Values', 'Logarithmic Values', 'Years', 'Months', 'Time', 'Categories'],
  offset: 10,
}

{
  type: 'category',
  reversed: true,
  categories: ['A', 'B', 'C', 'D'],
}

Ejecute yarn start, y vemos un gráfico de coordenadas paralelas con un lineareje, un logarithmiceje, un datetimeeje para Years, un datetimeeje para Months, un datetimeeje para Timey un category eje para 4 grupos.

Gráfico de coordenadas paralelas con ejes séptimos

Creamos el séptimo yAxispara ser categorytambién, con 2 grupos (0–1).

Expande datacon las séptimas coordenadas de category:

const data = [
  [0, 30, Date.UTC(2023), Date.UTC(2023, 0), Date.UTC(2023, 0, 1, 8, 20, 30), 0, 1], 
  [2, 45, Date.UTC(2022), Date.UTC(2023, 2), Date.UTC(2023, 0, 1, 9, 0, 0), 0, 0], 
  [4, 20, Date.UTC(2022), Date.UTC(2023, 3), Date.UTC(2023, 0, 1, 7, 0, 0), 1, 0], 
  [5, 33, Date.UTC(2020), Date.UTC(2023, 4), Date.UTC(2023, 0, 1, 12, 30, 0), 2, 1], 
  [6, 60, Date.UTC(2019), Date.UTC(2023, 4), Date.UTC(2023, 0, 1, 14, 40, 10), 2, 1],
  [8, 73, Date.UTC(2018), Date.UTC(2023, 6), Date.UTC(2023, 0, 1, 17, 0, 30), 2, 1], 
  [9, 80, Date.UTC(2016), Date.UTC(2023, 8), Date.UTC(2023, 0, 1, 19, 45, 15), 3, 1],
];

xAxis: {
  categories: ['Linear Values', 'Logarithmic Values', 'Years', 'Months', 'Time', 'Categories', 'State'],
  offset: 10,
}

{
  type: 'category',
  categories: ['False', 'True'],
}

Ejecute yarn start, y vemos un gráfico de coordenadas paralelas con un lineareje, un logarithmiceje, un datetimeeje para Years, un datetimeeje para Months, un datetimeeje para Time, un categoryeje para 4 grupos y un categoryeje para 2 grupos.

Gráfico de coordenadas paralelas con más o menos datos

Hemos mostrado un gráfico de coordenadas paralelas con varios datos. ¿Qué sucede si los datos están incompletos, es decir, algunos valores son nulos?

const data = [
  [null, 30, Date.UTC(2023), Date.UTC(2023, 0), Date.UTC(2023, 0, 1, 8, 20, 30), 0, 1], 
  [2, null, Date.UTC(2022), Date.UTC(2023, 2), Date.UTC(2023, 0, 1, 9, 0, 0), 0, 0], 
  [4, 20, null, Date.UTC(2023, 3), Date.UTC(2023, 0, 1, 7, 0, 0), 1, 0], 
  [5, 33, Date.UTC(2020), null, Date.UTC(2023, 0, 1, 12, 30, 0), 2, 1], 
  [6, 60, Date.UTC(2019), Date.UTC(2023, 4), null, 2, 1],
  [8, 73, Date.UTC(2018), Date.UTC(2023, 6), Date.UTC(2023, 0, 1, 17, 0, 30), null, 1], 
  [9, 80, Date.UTC(2016), Date.UTC(2023, 8), Date.UTC(2023, 0, 1, 19, 45, 15), 3, null],
];

Al pasar el cursor sobre una línea discontinua, aún se resaltan todas las piezas:

Un gráfico de coordenadas paralelas ayuda a analizar grandes conjuntos de datos para encontrar patrones y correlaciones. En lugar de las 7 líneas codificadas en los ejemplos anteriores, la siguiente modificación src/App.jsgenera 100 líneas aleatorias:

• En la línea 11, TOTAL_LINE_COUNTestá configurado con 100 líneas.
• En las líneas 13 a 24, datase genera dinámicamente en función de algún cálculo aleatorio.

Aquí está la trama con una línea suspendida.

Gráfico de coordenadas paralelas que se desplaza programablemente

Hemos explorado el gráfico de coordenadas paralelas en detalle. Tengamos un efecto divertido para pasar el mouse sobre una línea de forma programable cada segundo.

Instalamos un gancho que proporciona un declarativo setIntervalllamado useInterval.

% yarn add @use-it/interval

"dependencies": {
  "@use-it/interval": "^1.0.0",
  "highcharts": "^10.3.2",
  "highcharts-react-official": "^3.1.0"
}

• En la línea 51, enableMouseTrackingse desactiva mientras realizamos el hovering programable.
• En la línea 124, chartComponentRefse genera desde useRef, donde chartComponentRef.currentapunta al objeto gráfico configurándolo en la línea 135.
• En las líneas 126–133, useIntervalse invoca cada segundo (1000 ms). Selecciona una línea aleatoria (línea 128). En la línea 130, la línea seleccionada se establece en hover, y las demás líneas se establecen en inactive.

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

.highcharts-series path {
  stroke: rgb(0, 0, 255, 0.2);
  stroke-width: 2px;
}
.highcharts-series-hover path {
  stroke: purple;
  stroke-width: 5px;
}
.highcharts-series-inactive path {
  stroke: blue;
}

El siguiente video captura la dinámica.

El repositorio de código completo se encuentra aquí .

Conclusión

Highcharts es una biblioteca de gráficos de JavaScript de nivel empresarial basada en SVG. Viene con excelente documentación e innumerables ejemplos.

En este artículo, proporcionamos una guía paso a paso sobre el gráfico de coordenadas paralelas.

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

• En este artículo : line, spline, area, areaspline, column, bar, pie, scatter, scatter3d, heatmap, treemapy gauge.
• En este artículo : bubble, packedbubble, streamgraphy cylinder.
• En este artículo : sankeydiagram, arcdiagram, dependencywheely networkgraph.

Gracias por leer.

Want to Connect? 

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