introduzione

Highcharts è una libreria di grafici JavaScript di livello aziendale basata su SVG. Viene fornito con un'eccellente documentazione e innumerevoli esempi. L'unico inconveniente è che la licenza è proprietaria. È gratuito per usi personali/non commerciali, ma devi pagare per applicazioni commerciali.

In un precedente articolo , abbiamo introdotto Highcharts e l'ambiente di lavoro per esplorare Highcharts utilizzando l'app Create React . Continuiamo a utilizzare questo ambiente per provare il grafico delle coordinate parallele.

Come abbiamo spiegato nel precedente articolo, si consiglia di includere le seguenti importazioni per ogni grafico:

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: è il wrapper ufficiale supportato da Highcharts per React.
• highcharts/modules/exporting: è il modulo di esportazione di Highcharts che fornisce un menu con voci di menu relative all'esportazione a View in full screen, Print chart, Download PNG image, Download JPEG image, Download PDF documente Download SVG vector image.
• highcharts/modules/accessibility: è il modulo di accessibilità di Highcharts che fornisce l'accessibilità per l'HTML del grafico generato.

Un grafico a coordinate parallele è un modo comune per visualizzare e analizzare set di dati ad alta dimensione. La natura delle coordinate parallele richiede almeno due assi, che possono essere dello stesso tipo o di tipi diversi.

I tipi di assi supportati da Highchart sono linear, logarithmic, e . Oltre a quello utilizzato per i diagrammi di Gantt, tutti gli altri tipi di assi sono disponibili per un grafico a coordinate parallele. Il tipo di asse predefinito è , che utilizza la scala lineare.datetimecategorytreegridtreegridlinear

Di seguito src/App.jsè riportato un esempio che mostra un grafico a coordinate parallele con due linearassi:

• Alle righe 5 e 8, highcharts/modules/parallel-coordinatesviene caricato, che è richiesto per il grafico a coordinate parallele.
• Alle righe 10–18, dataviene creato con 7 righe, in cui ciascuna riga è composta da due coordinate.
• Alle righe 21–29 è definita l'impostazione del grafico.
  – Alla riga 22, typeè definito come 'linear'.
  – Alle righe 23–24, widthe heightsono definiti.
  – Alla riga 25, parallelCoordinatesè impostato su true.
  – Alle righe 26–28, tutti gli assi paralleli sono configurati con lineWidth2 (il valore predefinito è 1).
• Alle righe 30–32, il titolo del grafico è impostato su 'Parallel Coordinates Chart'.
• Alle righe 33-36, due xAxissono definiti, con offsetessere 10.
• Alle righe 37-52, due yAxissono definiti.
  – Alle righe 38–44, il primo yAxisè linear. minè 0 ed maxè 10. Since startOnTickè impostato su false mine maxi valori sono rigorosamente applicati. reversedè impostato su true, in modo tale che l'origine sia in alto.
  – Alle righe 45–51, yAxisanche il secondo è linear, con impostazione simile.
• Alle righe 53–56, seriessono calcolati da data(riga 10).
• Alle righe 57–59, i crediti predefiniti sono stati disattivati.
• Alla riga 62, viene creato un grafico a coordinate parallele.

Passa il mouse sul lato sinistro della linea, mostra la coordinata del primo asse.

Passa il mouse sul lato destro della linea, mostra la coordinata del secondo asse.

Per ogni riga ci sono dei marcatori alle due estremità e possiamo disattivarli.

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

Grafico a coordinate parallele con un asse lineare e un asse logaritmico

Modifichiamo il secondo yAxisin logarithmic, che visualizza i dati numerici su un intervallo di valori molto ampio in modo compatto. startOnTickviene rimosso, poiché i valori mine maxnon vengono comunque applicati.

{
  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,
}

Possiamo anche impostare tutte le linee su pinke le linee al passaggio del mouse su purplein src/App.css:

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

Esegui yarn starte vediamo un grafico di coordinate parallele con pinklinee.

E la linea sospesa è purple.

Quando si passa su una linea, le linee non al passaggio del mouse diventano sbiadite ( inactive). L'effetto è ottenuto impostando Highchats opacitysu 0.2. Può essere disattivato impostando opacitysu 1 in src/App.css:

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

La opacityregola è solo a scopo illustrativo, non la usiamo per il resto degli esempi.

Grafico a coordinate parallele con tre assi

Creiamo il terzo yAxisessere datetime, che utilizza la scala di data e ora e visualizza i valori di data e ora come etichette degli assi nel formato specificato. Date.UTC(year, month, day, hours, minutes, seconds, milliseconds)può ottenere l'ora in millisecondi per UTC (Universal Time Coordinated), l'ora standard globale definita dal World Time Standard, storicamente noto come Greenwich Mean Time.

Ecco il tipo/intervallo di Date.UTCparametri:

• year: numero intero
• 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',
}

Il grafico sembra buono fino a quando non passiamo su una linea vicino al terzo asse. Mostra il valore della data e dell'ora in millisecondi, invece dell'anno.

Possiamo configurare tooltipper utilizzare formattedValue, invece del valore grezzo:

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

Un grafico a coordinate parallele può supportare i tipi di lineo spline. Ecco il modificato src/App.js, che imposta il tipo di grafico su spline(riga 23):

Esegui yarn starte vediamo un grafico a coordinate parallele con linee curve ( spline).

Grafico a coordinate parallele con quattro assi

Creiamo anche il quarto yAxisper essere datetime, ma lo facciamo per mostrare mesi. Per mostrare le etichette dei mesi in modo significativo, la distanza tra i valori dovrebbe essere di mesi.

Ci espandiamo datacon le quarte coordinate di 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: Giorno della settimana breve, tipoMon
• %A: Giorno feriale lungo, tipoMonday
• %d: Giorno del mese a due cifre, da 01 a 31
• %e: giorno del mese, da 1 a 31
• %w: giorno della settimana, da 0 a 6
• %b: Mese breve, tipoJan
• %B: Mese lungo, tipoJanuary
• %m: numero del mese a due cifre, da 01 a 12
• %y: Anno a due cifre, come 09 per il 2009
• %Y: Anno a quattro cifre, come il 2009
• %H: Ore a due cifre nel formato 24h, da 00 a 23
• %k: Ore in formato 24h, da 0 a 23
• %I: Ore a due cifre nel formato 12h, da 00 a 11
• %l: Ore in formato 12h, da 1 a 12
• %M: minuti a due cifre, da 00 a 59
• %p: AM o PM maiuscolo
• %P: AM o PM minuscoli
• %S: Secondi a due cifre, da 00 a 59
• %L: Millisecondi

Esegui yarn starte vediamo un grafico a coordinate parallele con un linearasse, un logarithmicasse, un datetimeasse per Yearse un datetimeasse per Months.

Grafico a coordinate parallele con cinque assi

Creiamo anche il quinto yAxisper essere datetime, ma lo facciamo per mostrare il tempo. Per mostrare le etichette temporali in modo significativo, la distanza tra i valori deve essere di ore.

Ci espandiamo datacon le quinte coordinate di 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
  },
}

Esegui yarn starte vediamo un grafico a coordinate parallele con un linearasse, un logarithmicasse, un datetimeasse per Years, un datetimeasse per Monthse un datetimeasse per Time.

Grafico a coordinate parallele con sei assi

Creiamo il sesto yAxisessere category, con 4 gruppi (0–3).

Espandi datacon la sesta coordinata di 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'],
}

Esegui yarn starte vediamo un grafico a coordinate parallele con un linearasse, un logarithmicasse, un datetimeasse per Years, un datetimeasse per Months, un datetimeasse per Timee un category asse per 4 gruppi.

Grafico delle coordinate parallele con il settimo asse

Creiamo anche il settimo yAxisper essere category, con 2 gruppi (0–1).

Espandi datacon la settima coordinata di 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'],
}

Esegui yarn starte vediamo un grafico a coordinate parallele con un linearasse, un logarithmicasse, un datetimeasse per Years, un datetimeasse per Months, un datetimeasse per Time, un categoryasse per 4 gruppi e un categoryasse per 2 gruppi.

Grafico delle coordinate parallele con più o meno dati

Abbiamo mostrato un grafico a coordinate parallele con vari dati. Cosa succede se i dati sono incompleti, cioè alcuni valori sono nulli?

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],
];

Il passaggio del mouse su una linea spezzata evidenzia ancora tutti i pezzi:

Un grafico a coordinate parallele aiuta ad analizzare set di dati di grandi dimensioni per trovare modelli e correlazioni. Invece delle 7 righe codificate negli esempi precedenti, la seguente modifica src/App.jsgenera 100 righe casuali:

• Alla linea 11, TOTAL_LINE_COUNTè configurato con 100 linee.
• Alle righe 13–24, dataviene generato dinamicamente sulla base di alcuni calcoli casuali.

Ecco la trama con una linea sospesa.

Grafico delle coordinate parallele su cui si passa con il mouse in modo programmabile

Abbiamo esplorato in dettaglio il grafico delle coordinate parallele. Facciamo un effetto divertente per passare il mouse su una riga in modo programmabile ogni secondo.

Installiamo un hook che fornisce un dichiarativo setIntervalchiamato useInterval.

% yarn add @use-it/interval

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

• Alla riga 51, enableMouseTrackingè disabilitato mentre eseguiamo l'hovering programmabile.
• Alla riga 124, chartComponentRefviene generato da useRef, dove chartComponentRef.currentpunta all'oggetto grafico configurandolo alla riga 135.
• Alle righe 126–133, useIntervalviene richiamato ogni secondo (1000 ms). Seleziona una riga casuale (riga 128). Alla riga 130, la riga selezionata è impostata su hovere le altre righe sono impostate su inactive.

Ecco il modificato 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;
}

Il seguente video cattura le dinamiche.

Il repository di codice completo si trova qui .

Conclusione

Highcharts è una libreria di grafici JavaScript di livello aziendale basata su SVG. Viene fornito con un'eccellente documentazione e innumerevoli esempi.

In questo articolo, abbiamo fornito una guida passo passo sul grafico delle coordinate parallele.

Abbiamo anche scritto articoli su altri tipi di Highcharts:

• In questo articolo : line, spline, area, areaspline, column, bar, pie, scatter, scatter3d, heatmap, treemap, e gauge.
• In questo articolo : bubble, packedbubble, streamgraph, e cylinder.
• In questo articolo : sankeydiagram, arcdiagram, dependencywheel, e networkgraph.

Grazie per aver letto.

Want to Connect? 

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