Esistono alcune librerie JavaScript per la stampa di vari grafici, che vanno dai grafici a barre ai grafici a linee e altro ancora. Se stai imparando a visualizzare i dati in modo dinamico sul tuo sito Web con JavaScript, Chart.js è una di queste librerie che dovresti provare.
Come puoi iniziare a creare visualizzazioni di dati con Chart.js? Imparerai come in questo articolo.
Iniziamo.
Che cos'è Chart.js?
Chart.js è una libreria JavaScript di visualizzazione dati open source utilizzata per tracciare grafici renderizzabili in HTML. Attualmente supporta otto diversi tipi di grafici interattivi che puoi anche animare. Per creare un grafico basato su HTML con chart.js, è necessario un canvas HTML che lo contenga.
La libreria accetta un set di set di dati e altri parametri di personalizzazione come il colore di sfondo, il colore del bordo e altro. Uno dei set di dati è il etichetta, che rappresenta i valori sull'asse X. L'altro è un insieme di valori numerici, che in genere si trovano sull'asse Y.
È inoltre necessario specificare il tipo di grafico all'interno dell'oggetto grafico in modo che la libreria sappia quale grafico tracciare.
Come creare grafici con Chart.js
Come accennato in precedenza, puoi creare vari tipi di grafici con chart.js. Per questo tutorial, inizierai con grafici a linee e a barre. Una volta compreso il concetto alla base di questi, avrai tutti gli strumenti e la sicurezza di cui hai bisogno per tracciare gli altri grafici disponibili.
Imparentato:Come rendere il tuo sito web reattivo e interattivo con CSS e JavaScript
Per iniziare a usare chart.js, creare i file necessari. Per questo tutorial, i nomi dei file sono grafico.html, plot.js, e index.css. Puoi utilizzare qualsiasi convenzione di denominazione per i tuoi file.
Ora, incolla quanto segue nel file testa sezione del file HTML per collegarsi alla rete di distribuzione dei contenuti (CDN) di Chart.js.
In grafico.html:
src=" https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js">
Quindi, crea una tela HTML per contenere il tuo grafico e assegnagli un ID. Inoltre, connettiti al file CSS (index.css) nel file testa e punta al tuo file JavaScript (plot.js) nel file corpo sezione.
La struttura del file HTML è simile a questa:
<br> Grafico<br>
Grafici
E nel tuo CSS:
corpo{
colore di sfondo:#383735;
}
h1{
colore:#e9f0e9;
margine sinistro: 43%;
}
#trame{
margine: automatico;
colore di sfondo: #2e2d2d;
}
Lo stile CSS sopra non è una convenzione fissa. Quindi puoi modellare il tuo come preferisci a seconda della struttura del tuo DOM. Una volta che i tuoi file HTML e CSS sono pronti, è il momento di tracciare i tuoi grafici con JavaScript.
Il grafico a linee
Per creare un grafico a linee con chart.js, imposterai il grafico genere a linea. Questo dice alla libreria di disegnare un grafico a linee.
Per dimostrarlo, nel tuo file JavaScript:
// Ottieni la tela HTML tramite il suo ID
plots = document.getElementById("trame");
// Esempi di set di dati per gli assi X e Y
var mesi = ["Gen", "Feb", "Mar", "Apr", "Maggio", "Giu", "Luglio"]; //Resta sull'asse X
var traffic = [65, 59, 80, 81, 56, 55, 60] //Resta sull'asse Y
// Crea un'istanza dell'oggetto Chart:
nuovo grafico (trame, {
digitare: 'linea', //Dichiara il tipo di grafico
dati: {
etichette: mesi, //Dati dell'asse X
set di dati: [{
dati: traffico, //Dati dell'asse Y
backgroundColor: '#5e440f',
bordoColore: 'bianco',
riempimento: falso, //Riempi la curva sotto la linea con il colore dello sfondo. È vero per impostazione predefinita
}]
},
});
Produzione:
Sentiti libero di cambiare il riempire valore a vero, usa più dati o modifica i colori per vedere cosa succede.
Come puoi anche vedere, c'è una piccola casella della legenda nella parte superiore del grafico. Puoi rimuoverlo all'interno di un optional opzioni parametro.
Il opzioni il parametro aiuta anche con altre personalizzazioni oltre a rimuovere o includere la legenda. Ad esempio, puoi usarlo per forzare un asse a partire da zero.
Per dichiarare un opzioni parametro, ecco come appare la sezione del grafico nel tuo file JavaScript:
// Crea un'istanza dell'oggetto Chart:
nuovo grafico (trame, {
digitare: 'linea', //Dichiara il tipo di grafico
dati: {
etichette: mesi, //Dati dell'asse X
set di dati: [{
dati: traffico, //Dati dell'asse Y
backgroundColor: '#5e440f', //Colore dei punti
bordoColore: 'bianco', //Colore della linea
riempimento: falso, //Riempi la curva sotto la linea con il colore dello sfondo. È vero per impostazione predefinita
}]
},
//Specifica le opzioni personalizzate:
opzioni:{
legenda: {visualizzazione: false}, //Rimuovi la casella della legenda impostandola su false. È vero per impostazione predefinita.
//Specificare le impostazioni per le bilance. Per fare in modo che l'asse Y parta da zero, per esempio:
bilancia:{
yAxes: [{ tick: {min: 0}}] //Puoi ripetere lo stesso per l'asse X se contiene numeri interi.
}
}
});
Produzione:
Puoi anche utilizzare diversi colori di sfondo per ogni punto. Tuttavia, variare i colori di sfondo in questo modo è generalmente più utile con i grafici a barre.
Creazione di grafici a barre con Chart.js
Qui, devi solo cambiare il grafico genere a sbarra. Non è necessario impostare il riempire opzione perché le barre ereditano automaticamente il colore di sfondo:
// Crea un'istanza dell'oggetto Chart:
nuovo grafico (trame, {
digitare: 'bar', //Dichiara il tipo di grafico
dati: {
etichette: mesi, //Dati dell'asse X
set di dati: [{
dati: traffico, //Dati dell'asse Y
backgroundColor: '#3bf70c', //Colore delle barre
}]
},
opzioni:{
legenda: {visualizzazione: false}, //Rimuovi la casella della legenda impostandola su false. È vero per impostazione predefinita.
}
});
Produzione:
Sentiti libero di forzare l'asse Y a partire da zero o qualsiasi valore come hai fatto per il grafico a linee.
Imparentato:Metodi di array JavaScript che dovresti padroneggiare
Per utilizzare colori diversi per ciascuna barra, passa una matrice di colori che corrispondono al numero di elementi nei tuoi dati nel file colore di sfondo parametro:
// Crea un'istanza dell'oggetto Chart:
nuovo grafico (trame, {
digitare: 'bar', //Dichiara il tipo di grafico
dati: {
etichette: mesi, //Dati dell'asse X
set di dati: [{
dati: traffico, //Dati dell'asse Y
//Colore di ogni barra:
colore di sfondo: [
"rgba (196, 190, 183)",
"rgba (21, 227, 235)",
"rgba (7, 150, 245)",
"rgba (240, 5, 252)",
"rgba (252, 5, 79)",
"rgb (0,12,255)",
"rgb (17, 252, 5)"],
}]
},
opzioni:{
legenda: {visualizzazione: false}, //Rimuovi la casella della legenda impostandola su false. È vero per impostazione predefinita.
}
});
Produzione:
Creare un grafico a torta con Chart.js
Per disegnare un grafico a torta, cambia il tipo di grafico in torta. Potresti anche voler impostare la visualizzazione della legenda su vero per vedere cosa rappresenta ogni segmento della torta:
// Crea un'istanza dell'oggetto Chart:
nuovo grafico (trame, {
digita: 'torta', //Dichiara il tipo di grafico
dati: {
etichette: mesi, //Definisce ogni segmento
set di dati: [{
dati: traffico, //Determina la dimensione del segmento
//Colore di ogni segmento
colore di sfondo: [
"rgba (196, 190, 183)",
"rgba (21, 227, 235)",
"rgba (7, 150, 245)",
"rgba (240, 5, 252)",
"rgba (252, 5, 79)",
"rgb (0,12,255)",
"rgb (17, 252, 5)"],
}]
},
opzioni:{
legend: {display: true}, //Questo è vero per impostazione predefinita.}
});
Produzione:
Come hai fatto negli esempi sopra, puoi provare altri grafici modificando il genere.
Tuttavia, ecco un elenco di supportati chart.js tipi di grafici che puoi provare usando le convenzioni di codifica sopra:
- sbarra
- linea
- dispersione
- ciambella
- torta
- radar
- area polare
- bolla
Gioca con Chart.js
Anche se in questo tutorial hai messo le mani su grafici a linee, a torta e a barre, il modello di codice per tracciare altri grafici con chart.js segue la stessa convenzione. Quindi sentiti libero di giocare anche con gli altri.
Detto questo, se vuoi più di quello che offre chart.js, potresti voler dare un'occhiata anche ad altre librerie di grafici JavaScript.
Ci sono molti framework JavaScript disponibili per aiutare con lo sviluppo. Eccone alcuni che dovresti conoscere.
Leggi Avanti
- Programmazione
- JavaScript
- Analisi dei dati
- Programmazione
- HTML
Idowu è appassionato di qualsiasi tecnologia e produttività intelligenti. Nel tempo libero, gioca con la programmazione e passa alla scacchiera quando è annoiato, ma ama anche staccare dalla routine di tanto in tanto. La sua passione per mostrare alle persone la via della tecnologia moderna lo motiva a scrivere di più.
Iscriviti alla nostra Newsletter
Iscriviti alla nostra newsletter per suggerimenti tecnici, recensioni, ebook gratuiti e offerte esclusive!
Clicca qui per iscriverti