Iniziare con Chart.js Introduzione

Le persone normalmente non vogliono passare attraverso una grande quantità di dati presentati a loro in forma di testo o tabelle. Principalmente perché è noioso, ma soprattutto, è un po 'più difficile elaborare i numeri grezzi. 

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

Con solo dieci paesi in questa tabella, ci sono ancora ottime possibilità che tu e gli altri lettori saltiate completamente sul tavolo. Normalmente, le persone guardano solo uno o due paesi che li interessano. Se gli stessi dati fossero stati presentati sotto forma di grafico a barre, ci sarebbe voluto pochissimo tempo prima che qualcuno potesse 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ù popolati del Bangladesh, e la Cina ha circa dieci volte più persone della Russia - solo guardando la lunghezza delle barre nel grafico.

Una libreria popolare che è possibile utilizzare per creare diversi tipi di grafici è Chart.js. In questa serie, imparerai tutti gli aspetti importanti di questa libreria. Può essere utilizzato per creare grafici fantasiosi e reattivi su HTML5 Canvas. 

La libreria consente di combinare diversi tipi di grafici e di tracciare con facilità le scale di data, logaritmiche o personalizzate. La libreria inoltre mette in mostra animazioni predefinite che possono essere applicate durante la modifica dei dati o l'aggiornamento dei colori. 

Iniziamo con l'installazione, quindi passeremo alle opzioni di configurazione e ad altri aspetti.

Installazione e utilizzo

Puoi scaricare l'ultima versione di Chart.js da GitHub o utilizzare il link CDN per includerlo nei tuoi progetti. Puoi anche installare la libreria usando npm o pergolato con l'aiuto dei seguenti comandi:

npm install chart.js --save bower install chart.js --save

La libreria ha due diverse versioni. La versione normale, chiamata Chart.js e Chart.min.js, viene fornito con la libreria Chart.js e un parser di colori. Se si desidera utilizzare questa versione della libreria e decidere di utilizzare l'asse del tempo nei grafici, sarà necessario includere separatamente la libreria Moment.js prima di utilizzare Chart.js. 

La versione in bundle, identificata come Chart.bundle.js  o Chart.bundle.min.js, include già Moment.js. In questo modo, non avrai bisogno di includere due file separati. Una cosa che devi tenere a mente non è usare questa versione se hai già incluso Moment.js nel tuo progetto. Ciò può causare problemi di versione.

Una volta che hai capito la versione della libreria che vuoi usare, puoi includerla nei tuoi progetti e iniziare a creare grafici fantastici.

Creare un grafico

Rappresentiamo la tabella della 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.

La larghezza e l'altezza sono utilizzate per determinare le dimensioni del grafico. Quando si creano grafici reattivi, le proporzioni del grafico sono determinate dalla larghezza e dall'altezza dell'area di disegno.

Successivamente, è necessario creare un'istanza di Grafico classe. Questo può essere fatto passando il nodo, l'istanza di jQuery o il contesto 2d della tela su cui vuoi disegnare il grafico.

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

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

var barChart = new Chart (popCanvas, type: 'bar', data: labels: ["China", "India", "Stati Uniti", "Indonesia", "Brasile", "Pakistan", "Nigeria", "Bangladesh", "Russia", "Giappone"], serie di dati: [label: 'Popolazione', dati: [1379302771, 1281935911, 326625791, 260580739, 207353391, 204924861, 190632261, 157826578, 142257519, 126451398], backgroundColor: [ 'rgba (255, 99, 132, 0.6)', 'rgba (54, 162, 235, 0.6)', 'rgba (255, 206, 86, 0.6)', 'rgba (75, 192, 192, 0.6) ',' rgba (153, 102, 255, 0.6) ',' rgba (255, 159, 64, 0.6) ',' rgba (255, 99, 132, 0.6) ',' rgba (54, 162, 235, 0.6) ',' rgba (255, 206, 86, 0.6) ',' rgba (75, 192, 192, 0.6) ',' rgba (153, 102, 255, 0.6) ']]);

L'oggetto passato nel secondo parametro contiene tutte le informazioni che Chart.js ha bisogno per disegnare il tuo grafico. Il genere la chiave viene utilizzata per specificare il tipo di grafico che si desidera disegnare. Può avere uno qualsiasi dei seguenti valori: linea, bar, radar, polarArea, torta, ciambella, e bolla. Imparerai a conoscere tutti questi tipi di grafici in questa serie.

La chiave dati contiene i dati effettivi che si desidera tracciare. Il colore di sfondo la chiave viene utilizzata per specificare il colore delle diverse barre nel grafico. Quando il colore di sfondo non è specificato, il valore predefinito 'RGBA (0,0,0,0.1)' viene usato. 

Ognuno dei grafici ha anche le proprie chiavi specifiche che è possibile utilizzare per controllare il suo aspetto. Ecco il grafico creato dal codice qui sopra:

Nella demo sopra puoi passare il mouse sopra le barre per vedere la popolazione esatta in diversi paesi. Un'altra cosa che vale la pena di notare è che la dimensione del grafico non è uguale alle dimensioni che abbiamo specificato, ma ha comunque lo stesso rapporto di aspetto. 

Se si desidera che i grafici abbiano le stesse dimensioni su tutti i dispositivi, sarà necessario impostare il valore di di risposta chiave per falso.

Opzioni di configurazione

La libreria Chart.js ti offre la possibilità di personalizzare tutti gli aspetti dei grafici che crei. Ad esempio, puoi modificare il colore e la larghezza dei bordi delle barre nel grafico sopra. È inoltre possibile modificare i suggerimenti e la legenda modificandone la dimensione e il colore. In questa sezione, imparerai a conoscere le diverse chiavi utilizzate per modellare questi elementi.

La libreria dispone di quattro chiavi globali speciali che possono essere utilizzate per modificare tutti i tipi di carattere in un grafico. Queste chiavi sono defaultFontFamily, DefaultFontSize, defaultFontStyle, e DefaultFontColor. La dimensione del carattere è specificata in pixel e non si applica a radialLinear etichette del punto di scala. allo stesso modo, defaultFontStyle non si applica al titolo del tooltip o al piè di pagina.

Chart.defaults.global.defaultFontFamily = "Lato"; Chart.defaults.global.defaultFontSize = 18; Chart.defaults.global.defaultFontColor = 'blue';

Il seguente grafico utilizza le impostazioni di carattere globale sopra indicate. Cambiare l'aspetto in questo modo può aiutarti a creare grafici che si adattino al tuo sito web con stile.

Puoi anche modificare la legenda che appare in un grafico. Le opzioni di configurazione dovranno essere passate nel options.legend namespace. Puoi anche specificare le opzioni della legenda a livello globale per tutti i grafici usando Chart.defaults.global.legend. La posizione della legenda è controllata usando il posizione chiave, che può accettare uno dei seguenti quattro valori: superiore, sinistra, parte inferiore, e destra. Puoi anche mostrare o nascondere la legenda usando il display chiave.

Oltre alla legenda, puoi anche controllare l'aspetto dell'etichetta della legenda. Le sue opzioni di configurazione sono impostate sotto la configurazione della legenda usando il etichetta chiave. La larghezza della scatola dei colori può essere specificata usando il boxWidth chiave. Se non viene specificato alcun valore, viene utilizzato il valore predefinito 40. 

La famiglia di caratteri, la dimensione del carattere, il colore del carattere e i valori di stile del carattere sono ereditati dalla configurazione globale per impostazione predefinita. Tuttavia, è possibile specificare i propri valori per loro utilizzando dimensione del font, stile del font, famiglia di font, e colore del carattere.

var barChart = new Chart (popCanvas, tipo: 'bar', dati: dati, opzioni: legend: display: true, position: 'bottom', labels: boxWidth: 80, fontColor: 'rgb (60, 180 , 100) ');

È possibile controllare il modo in cui le descrizioni dei comandi vengono disegnate localmente per un grafico utilizzando il options.tooltips namespace. allo stesso modo, Chart.defaults.global.tooltips può essere usato per impostare l'aspetto dei tooltip a livello globale. Per specificare se le descrizioni dei comandi devono essere presentate all'utente, è possibile utilizzare abilitato chiave. Impostandolo a falso disabiliterà i tooltip. Il valore predefinito di questa chiave è vero. 

Puoi anche controllare il comportamento di mostrare / nascondere i tooltip usando intersecare chiave. Quando impostato su vero, che è anche il valore predefinito di questo tasto, i tooltip sono mostrati solo quando il puntatore del mouse interagisce effettivamente con le barre. Quando impostato su falso, i tooltip sono mostrati in base al comportamento specificato dal modalità chiave. 

Il modalità la chiave è usata per determinare quale elemento è mostrato nel tooltip. Il suo valore predefinito è più vicino. Questo significa che quando si imposta intersecare a falso, il tooltip verrà mostrato per la barra più vicina al puntatore del mouse.

Proprio come la legenda, puoi anche controllare il valore di diverse proprietà basate sui font per le descrizioni dei comandi. L'unica differenza è che questa volta i valori dovranno essere impostati individualmente per gli elementi titolo, corpo e piè di pagina del suggerimento. 

Ad esempio, è possibile modificare le proprietà del carattere del corpo del suggerimento usando bodyFontFamily, bodyFontSize, bodyFontStyle, e bodyFontColor. Il titolo e il piè di pagina del tooltip hanno anche proprietà aggiuntive chiamate titleMarginBottom e footerMarginTop. Possono essere usati per aggiungere dello spazio extra tra loro e il corpo del suggerimento. 

Allo stesso modo, è possibile aggiungere un riempimento extra ai lati sinistro / destro e superiore / inferiore del suggerimento usando xpadding e yPadding proprietà.

Puoi controllare la dimensione della freccia del tooltip usando il caretSize chiave. Lo sfondo dei tooltip può essere modificato usando il colore di sfondo chiave.

var barChart = new Chart (popCanvas, tipo: 'bar', dati: dati, opzioni: tooltip: cornerRadius: 0, caretSize: 0, xPadding: 16, yPadding: 10, backgroundColor: 'rgba (0, 150, 100, 0.9) ', titleFontStyle:' normal ', titleMarginBottom: 15);

Le opzioni di cui sopra nasconderanno il segno di omissione come caretSize è impostato su 0. Ecco una demo funzionante che mostra le opzioni in azione. Prova a passare il mouse sopra le barre per visualizzare il suggerimento personalizzato.

Pensieri finali

Questo tutorial ha fornito un'introduzione di base della libreria Chart.js e ti ha mostrato come usarlo per creare grafici a barre. Hai anche appreso le diverse opzioni di configurazione che possono essere utilizzate per controllare l'aspetto di diversi grafici. 

Sebbene nel tutorial siano stati utilizzati solo grafici a barre, le opzioni di configurazione potevano essere applicate a tutti i tipi di grafici. Nel prossimo tutorial, imparerai a conoscere i grafici a linee e i grafici a barre in maggiore dettaglio.

JavaScript è diventato una delle lingue di fatto del lavoro sul web. Non è senza le sue curve di apprendimento, e ci sono un sacco di quadri e librerie per tenerti occupato, pure. Se stai cercando ulteriori risorse da studiare o da utilizzare nel tuo lavoro, dai un'occhiata a ciò che abbiamo a disposizione sul mercato Envato.

Se hai domande su questo tutorial, fammelo sapere nei commenti.

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