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 articolo precedente , abbiamo introdotto Highcharts e 12 tipi di grafici di line, spline, area, areaspline, column, bar, pie, scatter, scatter3d, heatmap, treemap, e gauge.

In quell'articolo, abbiamo creato un ambiente di lavoro per esplorare Highcharts utilizzando l'app Create React . Continuiamo a utilizzare l'ambiente per provare altri tipi di grafici di bubble, packedbubble, streamgraphe cylinder.

Come abbiamo spiegato in quell'articolo, si consiglia di includere le seguenti importazioni per ogni grafico:

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

• highcharts-react-official: è il wrapper ufficiale supportato da Highcharts per React.
• lodash: è una moderna libreria di utilità JavaScript che offre modularità, prestazioni ed extra. Poiché lodash viene fornito con l'app Create React , usiamo convenientemente la sua funzione, _.startCaseper rendere maiuscola ogni lettera iniziale.
• 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 bolle è un tipo di grafico che visualizza tre dimensioni di dati. Ogni entità è codificata nel [x, y, z]formato, dove [x, y]specifica la posizione, ed zè la dimensione.

Ecco il modificato src/App.js:

• Alle righe 6 e 9, highcharts/highcharts-moreviene caricato, necessario per il grafico a bolle.
• Alle righe 12–16, sono definiti type, width, e del grafico .height
• Alle righe 17-19, il titolo del grafico è composto dal tipo.
• Alle righe 20–24, yAxisè configurato con un'estensione title.
• Alle righe 25–35, seriesdefinisce tre serie di punti dati (righe 26–28, righe 29–31 e righe 32–34).
• Alle righe 36–38, i crediti predefiniti sono stati disattivati.
• Alla riga 43 viene creato il grafico a bolle.

Il grafico a bolle imballate

Un grafico a bolle compresso è un tipo di grafico a bolle, con la sua posizione, [x, y], calcolata automaticamente per comprimere le bolle in un cluster. Invece del formato, [x, y, z]il grafico a bolle compresso richiede solo il zvalore per la dimensione. Utilizza la dimensione e, facoltativamente, il colore per visualizzare i dati.

Ecco il modificato src/App.js:

• Alle righe 6 e 9, highcharts/highcharts-moreviene caricato, necessario per il grafico a bolle compresso.
• Alle righe 12–16, sono definiti type, width, e del grafico .height
• Alle righe 17-19, il titolo del grafico è composto dal tipo.
• Alle righe 20–29, la dimensione minima della bolla è configurata per essere 30% e la dimensione massima della bolla è configurata per essere 100%. Le etichette dati sono abilitate e il nome del punto formatta ciascuna etichetta.
• Alle righe 30–111, seriesdefinisce quattro serie di punti dati, A(righe 33–50), B(righe 54–75), C(righe 79–92) e D(righe 96–109).
• Alle righe 112–114, i crediti predefiniti sono stati disattivati.
• Alla riga 119, viene creato il grafico a bolle compresso.

Il grafico a bolle compresso ha la funzionalità di trascinamento della selezione, che consente a un utente di spostare una bolla selezionata tra le serie per verificare come cambiano le loro relazioni con lo spostamento.

Il grafico a flusso e i grafici ad area

Un grafico a flusso è un grafico ad area in pila spostato attorno a un asse centrale, che risulta in una forma fluida e organica. Viene spesso utilizzato per la visualizzazione di volumi composti in diverse categorie o nel tempo.

Ecco il modificato src/App.js:

• Alle righe 6 e 9, highcharts/modules/streamgraphviene caricato, che è necessario per il grafico del grafico a flusso.
• Alle righe 12–16, sono definiti type, width, e del grafico .height
• Alle righe 17-19, il titolo del grafico è composto dal tipo.
• Alle righe 20–22, xAxissono definite sei categorie.
• Alle righe 23–40, seriesdefinisce quattro serie di volumi per queste categorie, Group 1(righe 24–27), Group 2(righe 28–31), Group 3(righe 32–35) e Group 4(righe 36–39).
• Alle righe 41–43, i crediti predefiniti sono stati disattivati.
• Alla riga 48, viene creato il grafico del grafico a flusso.

Per le stesse opzioni, modificare il tipo in area:

<HighchartsReact highcharts={Highcharts} options={getOptions('area')} />

Aggiungi plotOptionsper impilarli:

plotOptions: {
  area: {
    stacking: 'normal',
  },
}

Cambia il tipo in areaspline:

plotOptions: {
  areaspline: {
    stacking: 'normal',
  },
}
...

function App() {
  return (
    <HighchartsReact highcharts={Highcharts} options={getOptions('areaspline')} />
  );
}

Sembra simile al grafico del grafico del flusso?

Il grafico a flusso viene visualizzato attorno a un asse centrale, mentre il grafico ad area spline in pila viene visualizzato lungo xAxis. Altrimenti, sono simili.

I grafici a cilindri e a colonne

Un grafico a cilindri 3D è una variante di un istogramma 3D e presenta punti cilindrici.

Ecco il modificato src/App.js:

• Alle righe 4 e 8, highcharts/highcharts-3dviene caricato, poiché il grafico a cilindri è un grafico 3D.
• Alle righe 7 e 11, highcharts/modules/cylinderviene caricato, che è necessario per il grafico dei cilindri.
• Alle righe 14–18, sono definiti type, width, e del grafico .height
• Alle righe 19-21, il titolo del grafico è composto dal tipo.
• Alle righe 22–24, xAxissono definite sei categorie.
• Alle righe 25–42, seriesdefinisce quattro serie di volumi per queste categorie, Group 1(righe 26–29), Group 2(righe 30–33), Group 3(righe 34–37) e Group 4(righe 38–41).
• Alle righe 43–45, i crediti predefiniti sono stati disattivati.
• Alla riga 50 viene creato il grafico cilindrico.

Se osservi attentamente, entrambe le estremità di ciascuna colonna sembrano cilindriche. Ecco la vista ingrandita:

Cambia il tipo in column:

function App() {
  return (
    <HighchartsReact highcharts={Highcharts} options={getOptions('column')} />
  );
}

Quando si osserva la vista 2D, le differenze tra i grafici a cilindri e a colonne sono minime.

Aggiungi options3dper abilitare i grafici 3D e configurare gli angoli di rotazione e la profondità.

chart: {
  type,
  width: 800,
  height: 600,
  options3d: {
    enabled: true,
    alpha: 15,
    beta: 30,
    depth: 300,
  },
}

Ecco l'istogramma in vista 3D:

Nella visualizzazione 3D, le differenze tra i grafici a cilindri e a colonne sono evidenti.

Il cilindro sembra cilindrico, ma vogliamo renderlo più tridimensionale. Inseriamo gruppi in diverse profondità e impostiamo cilindri con diametri diversi ( pointWidth).

Ecco il modificato src/App.js:

• Alle righe 31–34, zAxisè configurato con mine maxvalori.
• Alle righe 36–41, Group 1imposta deptha 0 e pointWidtha 30.
• Alle righe 42-47, Group 2imposta depthper essere 100 e pointWidthper essere 20.
• Alle righe 48-53, Group 3imposta deptha 200 e pointWidtha 20.
• Alle righe 54–59, Group 4imposta deptha 300 e pointWidtha 50.

Cambia il tipo in column:

function App() {
  return (
    <HighchartsReact highcharts={Highcharts} options={getOptions('column')} />
  );
}

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 introdotto altri tipi di grafici di bubble, packedbubble, streamgraphe cylinder.

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 : sankeydiagram, arcdiagram, dependencywheel, e networkgraph.
• In questo articolo : parallelCoordinates.

Grazie per aver letto.

Want to Connect? 

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