Guida introduttiva a Chart.js: introduzione

Le persone normalmente non amano visualizzare una grande quantità di dati presentati in forma di testo o tabelle. Per lo più perché è noioso, ma ancora più importante, è un po' più difficile elaborare numeri grezzi.

Ad esempio, ecco una tabella dei dieci paesi più popolosi del mondo:

Con solo dieci paesi in questa tabella, c'è ancora una buona possibilità che voi e altri lettori ignorerete completamente la tabella. Normalmente, le persone guardano solo uno o due paesi che gli interessano. Se gli stessi dati fossero presentati in forma di grafico a barre, ci sarebbe voluto poco tempo per avere un'idea approssimativa della popolazione in questi paesi.

Inoltre, sarà molto più facile capire tendenze o fatti — ad esempio, gli Stati Uniti sono due volte più popolosi del Bangladesh e la Cina ha circa dieci volte la popolazione della Russia — semplicemente osservando la lunghezza delle barre nel grafico.

Una popolare libreria che è possibile utilizzare per creare diversi tipi di grafici è Chart.js. In questa serie, sarà possibile conoscere tutti gli aspetti importanti di questa libreria. Può essere utilizzata per creare grafici fantastici, reattivi basati su HTML5 Canvas.

La libreria consente di mescolare con facilità diversi tipi di grafici su scale logaritmiche o di tempo. La libreria dispone anche di animazioni pronte(out-of-the-box) che possono essere applicate quando avviene la modifica dei dati o l'aggiornamento dei colori.

Cominciamo con l'installazione, e poi ci vedremo le opzioni di configurazione e altri aspetti.

Installazione e utilizzo

Si può scaricare l'ultima versione di Chart.js da GitHub o utilizzare il link CDN per includerlo nei vostri progetti. È inoltre possibile installare la libreria utilizzando npm o bower con l'aiuto dei seguenti comandi:

1

npm install chart.js --save

2

bower install chart.js --save

La libreria ha due versioni differenti. La versione normale, chiamata Chart.js e Chart.min.js, viene fornito con la libreria di Chart.js e un parser di colori. Se si desidera utilizzare questa versione della libreria e si decide di utilizzare l'asse temporale nei grafici, si dovrà includere separatamente la libreria Moment.js prima di utilizzare Chart.js.

La versione in bundle, che viene identificata come Chart.bundle.js o Chart.bundle.min.js, comprende già Moment.js. In questo modo, non sarà necessario includere due file separati. Una cosa che dovete tenere a mente è di non utilizzare questa versione se già è stata inserita Moment.js nel progetto. Questo può comportare problemi di conflitto di versione.

Una volta che avete capito la versione della libreria che desiderate utilizzare, potete includerla nei vostri progetti e avviare la creazione di grafici accattivanti.

1

<script src="path/to/Chart.min.js"></script>

2

3

<script>

4

    var barChart = new Chart({...})

5

</script>

Creazione di un grafico

Rappresentiamo la tabella di popolazione presentata nell'introduzione come un grafico a barre. L'asse y verrà utilizzato per tracciare la popolazione, e l'asse x verrà utilizzato per tracciare i paesi. Iniziamo creando una tela con id popChart.

1

<canvas id="popChart" width="600" height="400"></canvas>

La larghezza e l'altezza sono utilizzati per determinare le dimensioni del grafico. Durante la creazione di grafici reattivi, l'aspect ratio del grafico è determinato dalla larghezza e dall'altezza del canvas.

Successivamente, è necessario creare un'istanza della classe Chart. Questo può essere fatto passando il nodo html, l'istanza di jQuery o il contesto 2d del canvas su cui si desidera disegnare il grafico.

1

var popCanvas = $("#popChart");

2

var popCanvas = document.getElementById("popChart");

3

var popCanvas = document.getElementById("popChart").getContext("2d");

L'unica cosa che devi fare ora è passare tutti i parametri al costruttore:

1

var barChart = new Chart(popCanvas, {

2

  type: 'bar',

3

  data: {

4

    labels: ["China", "India", "United States", "Indonesia", "Brazil", "Pakistan", "Nigeria", "Bangladesh", "Russia", "Japan"],

5

    datasets: [{

6

      label: 'Population',

7

      data: [1379302771, 1281935911, 326625791, 260580739, 207353391, 204924861, 190632261, 157826578, 142257519, 126451398],

8

      backgroundColor: [

9

        'rgba(255, 99, 132, 0.6)',

10

        'rgba(54, 162, 235, 0.6)',

11

        'rgba(255, 206, 86, 0.6)',

12

        'rgba(75, 192, 192, 0.6)',

13

        'rgba(153, 102, 255, 0.6)',

14

        'rgba(255, 159, 64, 0.6)',

15

        'rgba(255, 99, 132, 0.6)',

16

        'rgba(54, 162, 235, 0.6)',

17

        'rgba(255, 206, 86, 0.6)',

18

        'rgba(75, 192, 192, 0.6)',

19

        'rgba(153, 102, 255, 0.6)'

20

      ]

21

    }]

22

  }

23

});

L'oggetto passato nel secondo parametro contiene tutte le informazioni di cui Chart.js ha bisogno per disegnare il grafico. La chiave type viene utilizzata per specificare il tipo di grafico che si desidera disegnare. Può avere uno qualsiasi dei seguenti valori: line, bar, radar, polarArea, pie, doughnut e bubble. Imparerete qualcosa su tutti questi tipi di grafico in questa serie.

La chiave data contiene i dati effettivi che si desidera disegnare. La chiave backgroundColor è utilizzata per specificare il colore delle barre nel grafico. Quando il colore di sfondo non è specificato, viene utilizzato il valore predefinito 'rgba(0,0,0,0.1)'.

Ogni grafico ha anche le proprie chiavi specifiche che è possibile utilizzare per controllarne l'aspetto. Ecco il grafico creato dal codice sopra riportato:

Nella demo di sopra, è possibile posizionarsi sulle barre per vedere l'esatta popolazione in diversi paesi. Un'altra cosa da notare è che le dimensioni del grafico non sono uguali alle dimensioni che abbiamo specificato, ma hanno le stesse proporzioni.

Se si desidera che i grafici abbiano le stesse dimensioni su tutti i dispositivi, sarà necessario impostare il valore della chiave responsive su false.

Opzioni di configurazione

La libreria Chart.js vi dà la possibilità di personalizzare tutti gli aspetti dei grafici che è possibile creare. Ad esempio, è possibile modificare il colore e lo spessore dei bordi delle barre nel grafico qui sopra. È anche possibile modificare le descrizioni e la legenda cambiando il colore e la dimensione del carattere. In questa sezione potrete conoscere diverse chiavi che vengono utilizzati per lo stile di questi elementi.

La libreria ha quattro chiavi speciali globali che possono essere utilizzate per modificare tutti i caratteri in un grafico. Queste chiavi sono defaultFontFamily, defaultFontSize, defaultFontStyle e defaultFontColor. La dimensione del carattere è specificata in pixel e non si applica per le etichette dei punti nella scala radialLinear. DefaultFontStyle non si applica allo stesso modo nel tooltip o nel footer.

1

Chart.defaults.global.defaultFontFamily = "Lato";

2

Chart.defaults.global.defaultFontSize = 18;

3

Chart.defaults.global.defaultFontColor = 'blue';

Il grafico seguente utilizza le impostazioni di carattere globale. Modificare l'aspetto in questo modo può aiutarvi a creare grafici che corrispondono allo stile del tuo sito Web.

È inoltre possibile modificare la legenda che viene visualizzata in un grafico. Le opzioni di configurazione devono essere passate nello spazio dei nomi options.legend. È anche possibile specificare le opzioni di legenda a livello globale per tutti i grafici utilizzando Chart.defaults.global.legend. La posizione della legenda viene controllata utilizzando la chiave position, che può accettare uno dei seguenti quattro valori: top, left, bottom e right. È anche possibile mostrare o nascondere la legenda utilizzando la chiave display.

Oltre la legenda, è anche possibile controllare l'aspetto dell'etichetta della legenda. Le opzioni di configurazione sono impostate sotto la configurazione di legenda utilizzando la chiave label. La larghezza della casella di colore può essere specificata usando la chiave boxWidth. Quando non viene specificato alcun valore, viene utilizzato il valore predefinito 40.

La famiglia di caratteri, dimensione carattere, colore carattere e stile di carattere vengono ereditati dalla configurazione globale per impostazione predefinita. Tuttavia, è possibile specificare valori personalizzati per loro utilizzando fontSize, fontStyle, fontFamily e fontColor.

1

var barChart = new Chart(popCanvas, {

2

    type: 'bar',

3

    data: data,

4

      options: {

5

        legend: {

6

          display: true,

7

          position: 'bottom',

8

          labels: {

9

            boxWidth: 80,

10

            fontColor: 'rgb(60, 180, 100)'

11

          }

12

        }

13

    }

14

});

È possibile controllare il modo in cui i tooltips vengono disegnati localmente per un grafico utilizzando lo spazio dei nomi options.tooltips. Analogamente, Chart.defaults.global.tooltips può essere utilizzato per impostare l'aspetto dei tooltips a livello globale. Per specificare se i tooltips devono essere disposti, è possibile utilizzare la chiave enabled. Impostandolo su false i tooltips vengono disabilitati. Il valore predefinito di questa chiave è true.

È inoltre possibile controllare il comportamento di show/hide dei tooltips utilizzando la chiave intersect. Quando impostata su true, che è anche il valore predefinito di questa chiave, i tooltips vengono visualizzati solo quando il puntatore del mouse tocca le barre. Se impostato su false, i tooltips sono visualizzati in base al comportamento specificato dalla chiave mode.

La chiave mode viene utilizzata per determinare quale elemento viene visualizzato nel tooltip. Il valore predefinito è nearest(più vicino). Ciò significa che quando si imposta intersect su false, l'oggetto tooltip verrà mostrato per la barra che è più vicina al puntatore del mouse.

Proprio come la legenda, è inoltre possibile controllare il valore della proprietà dei font per i tooltips. L'unica differenza è che questa volta i valori dovranno essere configurati singolarmente per gli elementi di title, body e footer del tooltip.

Ad esempio, è possibile modificare le proprietà del font del body del tooltip utilizzando bodyFontFamily, bodyFontSize, bodyFontStyle e bodyFontColor. Il titolo e il footer del tooltip hanno anche proprietà aggiuntive denominate titleMarginBottom e footerMarginTop. Servono per aggiungere qualche spazio in più tra loro e il corpo del tooltip.

Allo stesso modo, è possibile aggiungere padding extra ai lati destra/sinistra e alto/basso dell'oggetto tooltip utilizzando le proprietà xPadding e yPadding.

È possibile controllare la dimensione della freccia del tooltip utilizzando la chiave di caretSize. Lo sfondo del tooltip può essere modificato utilizzando la chiave backgroundColor.

1

var barChart = new Chart(popCanvas, {

2

    type: 'bar',

3

    data: data,

4

      options: {

5

        tooltips: {

6

          cornerRadius: 0,

7

          caretSize: 0,

8

          xPadding: 16,

9

          yPadding: 10,

10

          backgroundColor: 'rgba(0, 150, 100, 0.9)',

11

          titleFontStyle: 'normal',

12

          titleMarginBottom: 15

13

        }

14

    }

15

});

Le opzioni di cui sopra nasconderanno il caret perchè caretSize è impostato su 0. Ecco una demo di lavoro che mostra le opzioni in azione. Prova a passare col mouse sopra le barre per vedere i tooltip personalizzati.

Considerazioni finali

Questo tutorial fornisce un'introduzione di base della libreria Chart.js e mostra come utilizzarla per creare grafici a barre. Hai imparato anche diverse opzioni di configurazione che possono essere utilizzate per controllare l'aspetto dei grafici.

Anche se abbiamo usato solo il bar charts nel tutorial, le opzioni di configurazione potrebbero essere applicate a tutti i tipi di grafico. Nel prossimo tutorial, imparerete qualcosa sui grafici a linee e sui grafici a barre in maggiore dettaglio.

JavaScript è diventato uno dei linguaggi de facto per lavorare sul web. Ha la sua curva di apprendimento e ci sono un sacco di frameworks e librerie per tenerti impegnato. Se stai cercando ulteriori risorse di studio o da utilizzare nel tuo lavoro, controlla quello che è disponibile nel marketplace Envato.

Se hai domande su questo tutorial, condividele nei commenti.

Si noti che i dati sulla popolazione sono stati presi da queste informazioni sul censimento.