Highcharts è una libreria di grafici JavaScript di livello aziendale basata su SVG. È stato rilasciato per la prima volta nel 2009 da Highsoft a Vik, in Norvegia.

Highcharts supporta un lungo elenco di diversi tipi di grafici, inclusi line, spline, area, areaspline, column, bar, pie, scatter, scatter3d, heatmap, treemap, gaugee quasi tutti i tipi di grafici. Viene fornito con un'eccellente documentazione e innumerevoli esempi. È potente con una curva di apprendimento bassa. L'unico inconveniente è che la licenza è proprietaria. È gratuito per usi personali/non commerciali, ma devi pagare per le applicazioni commerciali.

Insieme a D3.js , Highcharts domina l'applicazione di creazione di grafici. Diamo un'occhiata a come funziona.

Impostare l'ambiente di lavoro

Utilizzeremo l'app Create React per esplorare Highcharts. Il seguente comando crea un progetto React:

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

• highcharts: è la libreria di grafici JavaScript.
• highcharts-react-official: è il wrapper ufficiale supportato da Highcharts per 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;
}

• Alle righe 6–28 viene creata una configurazione del grafico. – Alle righe 7–11, sono definiti , , e
  del grafico . – Alle righe 12–14, il titolo del grafico è composto dal tipo. Poiché lodash viene fornito con l'app Create React , viene chiamato per rendere maiuscola ogni lettera iniziale. – Alle righe 15–19, , l'asse Y, o asse dei valori, è configurato con un . – Alle righe 20–27, vengono create due serie di dati.typewidthheight
_.startCase
yAxistitle
  
• Alle righe 33–40, ciascuna riga crea un grafico del tipo specificato:
  – line(riga 33): il grafico a linee è rappresentato da una serie di punti dati collegati da una linea retta.
  – spline(riga 34): il grafico spline disegna una linea curva tra i punti in una serie di dati.
  – area(riga 35): il grafico ad area funziona allo stesso modo di un grafico a linee, tranne per il fatto che riempie l'area tra la linea e la soglia, che per impostazione predefinita è 0.
  – areaspline(riga 36): il grafico ad area spline è uguale al grafico ad area, tranne per il fatto che la linea è una spline anziché una linea retta.
  – column(riga 37): il grafico a colonne visualizza i dati come barre verticali.
  –bar(riga 38): il grafico a barre è uguale al grafico a colonne, tranne per il fatto che l'asse X e l'asse Y sono invertiti.
  – pie(riga 39): Il grafico a torta è un grafico circolare diviso in settori, che è proporzionale alla quantità che rappresenta.
  – scatter(riga 40): il grafico a dispersione disegna un punto per ogni punto dati senza collegarli.

Esempio 2: Crediti grafico e menu Esporta

Guarda lo screenshot qui sopra. Per impostazione predefinita, Highcharts inserisce un'etichetta/collegamento dei crediti nell'angolo in basso a destra del grafico.

Il testo e il collegamento possono essere configurati. Ed ecco un esempio:

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

credits: {
  enabled: false,
}

Questo modulo può essere incluso in una riga di codice.

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

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

Ecco il modificato src/App.js:

• Alle righe 5–6, viene caricato il modulo di esportazione.
• Alle righe 30–32, i crediti predefiniti sono stati disattivati.

Sul grafico a linee, fai clic sulla Print chartvoce di menu e viene visualizzato un modale per stampare il grafico o salvarlo come file PDF.

Nel grafico a linee, fai clic sulla Download PNG imagevoce di menu e salva un file PNG nella Downloadscartella.

Ogni grafico può essere salvato in formato JPEG, PDF o SVG.

Esempio 3: Grafici di base nella vista 3D

highcharts-3dè un modulo Highcharts che fornisce supporto 3D. Deve essere importato per creare grafici 3D.

Questo modulo può essere incluso in una riga di codice

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

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

• options3dconfigura l'opzione 3D. La bandiera, enabled, abilita un grafico 3D. alphae betasono gli angoli per ruotare la vista del grafico e depthdefinisce la profondità totale con un valore predefinito di 100. Ecco un esempio:

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

• I dati del grafico potrebbero essere in un formato diverso per ciascun tipo. xAxisdefinisce l'asse X o l'asse delle categorie. Per i nostri esempi 3D, tre xAxissono definiti per i grafici a diverse profondità, sebbene questi xAxisstessi non siano visibili.

• Alle righe 6 e 8, viene caricato il modulo 3D di Highcharts.
• Alle righe 13–18, options3dabilita i grafici 3D e configura gli angoli di rotazione e la profondità.
• Alle righe 28–38, tre xAxissono impostate su invisibile.
• Alle righe 39–43, plotOptions.[type].depthè impostato su 100.
• Alle righe 44–57, seriesdefinisce i grafici per xAxis 0, xAxis 1, e xAxis 2. Ogni trama ha sei punti.

Ecco alcune osservazioni dallo screenshot qui sopra:

• line, spline, e i grafici vengono visualizzati bene areanella vista 3D.columnbar
• Il areasplinenon ruota la vista, poiché il tipo 3D non è ufficialmente supportato.
• Il piegrafico funziona, ma tre torte impilate l'una sull'altra sono goffe. Semplificandolo in una torta, sembra più bello:

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
}

Esempio 4: Grafici Heatmap

Una heatmap è una rappresentazione grafica dei dati in cui i singoli valori contenuti in una matrice sono rappresentati come colori.

Il grafico heatmap richiede l'importazione del modulo heatmap. Può essere realizzato da una riga di codice:

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

Ecco il modificato src/App.js:

• Alle righe 6 e 8, viene caricato il modulo heatmap.
• Alla riga 13, aggiungi plotBorderWidthper separare le aree della heatmap.
• Alle righe 18-20, xAxisè definito con 6 categories.
• Alle righe 21–25, yAxisè definito con 3 categories. titleè disattivato (riga 23) e categoriesviene visualizzato in un reversedordine.
• Alle righe 26–30, colorAxisè definito come un colore sfumato dal bianco (riga 28) al colore della prima serie (riga 29). colorAxissostituisce le etichette predefinite per le serie.
• Alle righe 31–45, dataè definito e dataLablesconsente di mostrare il valore della mappa termica in ciascuna area.
• Alla riga 53, viene creato il grafico heatmap.

Esempio 5: grafici ad albero

Una mappa ad albero è una rappresentazione grafica dei dati in cui i dati gerarchici vengono visualizzati utilizzando figure nidificate, in genere rettangoli.

Il grafico treemap richiede l'importazione del modulo treemap. Può essere fatto da una riga di codice:

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

• Alle righe 6 e 8 viene caricato il modulo treemap.
• Alla riga 16, typeè specificato in series, invece di chart.
• Alla riga 17, layoutAlgorithmè impostato su 'sliceAndDice’, che è il comportamento predefinito di divisione dell'area in parti più piccole.
• Alle righe 18–79, datadefinisce i dati gerarchici, che definiscono tre padri, Red(righe 19–23), Green(righe 24–28) e Blue(righe 29–33). Redha tre figli (linee 34–48), Greenha due figli (linee 49–58) e Blueha quattro figli (linee 59–78).
• Alla riga 89, viene creato il grafico ad albero.

Cambia layoutAlgorithmin 'stripes’, e vediamo che le aree sono divise in strisce:

Cambia layoutAlgorithmin 'squarified’o 'strip’, e vediamo che le aree sono divise nelle seguenti forme:

Esempio 6: Grafici Gauge

Un grafico del calibro è anche chiamato grafico del tachimetro o grafico del quadrante. Il grafico ha un ago che punta a un certo valore sopra il punto di rotazione. È una visualizzazione efficace per valutare le prestazioni, tenere traccia dei progressi e facilitare il processo decisionale.

Il grafico del misuratore richiede l' highcharts-moreimportazione del modulo. Può essere fatto da una riga di codice:

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

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

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

• Alle righe 6 e 8, highcharts-moreviene caricato.
• Alle righe 17–23, yAxisimposta mine maxsu 0 e 100. yAxis.title.text è impostato su 'Speed'.
• Alle righe 24–28, series.dataè impostato su 80.
• Alla riga 36, ​​viene creato il grafico a contatore.

Un grafico di gauge può essere definito per qualsiasi arco con pane.startAnglee pane.endAngle. Quando non è un cerchio completo, pane.backgrounddovrebbe essere impostato su null. È anche una buona idea regolare il centro in posizione [x, y].

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

Possiamo modellare le bande di misurazione in base ai yAxisvalori.

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

Sembra che il punto di rotazione sia troppo vicino al numero.

Ridimensioniamo il cinturino al 120%:

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

Esempio 7: Accessibilità ai grafici

Esegui esempi di grafici e nella console viene visualizzato il seguente avviso.

highcharts.src.js:223Avviso di Highcharts: prendi in considerazione l'inclusione del modulo "accessibility.js" per rendere il tuo grafico più utilizzabile per le persone con disabilità. Imposta l'opzione "accessibility.enabled" su false per rimuovere questo avviso. Vederehttps://www.highcharts.com/docs/accessibility/accessibility-module.

Ispeziona gli elementi del grafico e non vediamo informazioni sull'accessibilità.

L'accessibilità rende le applicazioni Web utilizzabili per le persone le cui capacità sono limitate in qualche modo, come la vista (utilizzando uno screen reader) e la mobilità (utilizzando solo la tastiera). Inoltre, le limitazioni potrebbero derivare dalla capacità del dispositivo, come i dispositivi mobili. È molto importante rendere accessibile il software aziendale .

Il modulo di accessibilità può essere importato da una riga di codice:

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

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

• Alle righe 7 e 10 viene caricato il modulo di accessibilità.
• Alle righe 19–22, accessibilitydefinisce un description.

Ci sono molte informazioni sull'accessibilità nello screenshot qui sopra, inclusa la descrizione dell'accessibilità che abbiamo specificato:

<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>

Conclusione

Abbiamo mostrato sette esempi di Highcharts in React, che includono 12 tipi di grafici di line, spline, area, areaspline, column, bar, pie, scatter, scatter3d, heatmap, treemap, e gauge.

Abbiamo anche scritto articoli su altri tipi di Highcharts:

• In questo articolo , bubble, packedbubble, streamgraphe cylinder.
• In questo articolo , sankeydiagram, arcdiagram, dependencywheele networkgraph.
• In questo articolo : parallelCoordinates.

Grazie per aver letto.

Want to Connect? 

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