Share
Nel primo tutorial Chart.js introduttivo della serie, hai imparato come installare e utilizzare Chart.js in un progetto. Hai anche imparato a conoscere alcune opzioni di configurazione globali che possono essere utilizzate per cambiare i caratteri e le descrizioni dei vari grafici. In questo tutorial, imparerai come creare grafici a barre e a barre in Chart.js.
I grafici a linee sono utili quando si desidera mostrare le variazioni di valore di una determinata variabile rispetto alle modifiche in alcune altre variabili. L'altra variabile è solitamente il tempo. Ad esempio, i grafici a linee possono essere utilizzati per mostrare la velocità di un veicolo durante intervalli di tempo specifici.
Chart.js ti permette di creare grafici a linee impostando il genere chiave per linea. Ecco un esempio:
var lineChart = new Chart (speedCanvas, type: 'line', data: speedData, options: chartOptions);
Ora forniremo i dati e le opzioni di configurazione di cui abbiamo bisogno per tracciare il grafico a linee.
var speedData = labels: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"], set di dati: [label: "Car Speed", dati: [ 0, 59, 75, 20, 20, 55, 40],]; var chartOptions = legend: display: true, position: 'top', labels: boxWidth: 80, fontColor: 'black';
Dal momento che non abbiamo fornito alcun colore per il grafico a linee, il colore predefinito RGBA (0,0,0,0.1) sarà usato. Non abbiamo apportato alcuna modifica al suggerimento o alla legenda. Puoi leggere ulteriori informazioni sulla modifica della dimensione della cassa, del suggerimento o della legenda nella prima parte della serie.
In questa parte, ci concentreremo su diverse opzioni specificamente disponibili per modificare i grafici a linee. Tutte le opzioni e i dati che abbiamo fornito sopra creeranno la seguente tabella.
Il colore dell'area sotto la curva è determinato dal colore di sfondo chiave. Tutti i grafici a linee tracciati con questo metodo saranno riempiti con il colore specificato. È possibile impostare il valore di riempire chiave per falso se vuoi solo disegnare una linea e non riempirla con alcun colore.
Un'altra cosa che potresti aver notato è che stiamo usando punti dati discreti per tracciare il grafico. La libreria interpola automaticamente i valori di tutti gli altri punti utilizzando algoritmi incorporati.
Per impostazione predefinita, i punti vengono tracciati utilizzando un'interpolazione cubica ponderata personalizzata. Tuttavia, puoi anche impostare il valore di cubicInterpolationMode chiave per monotono per tracciare i punti in modo più accurato quando il grafico che stai tracciando è definito dall'equazione y = f (x). La tensione della curva Bezier tracciata è determinata dal lineTension chiave. È possibile impostare il suo valore su zero per disegnare linee rette. Si noti che questa chiave viene ignorata quando il valore di cubicInterpolationMode è già stato specificato.
Puoi anche impostare il valore del colore del bordo e la sua larghezza usando il colore del bordo e larghezza del bordo chiavi. Se si desidera tracciare il grafico utilizzando una linea tratteggiata anziché una linea continua, è possibile utilizzare il borderDash chiave. Accetta un array come valore, i cui elementi determinano rispettivamente la lunghezza e la spaziatura dei trattini.
L'aspetto dei punti tracciati può essere controllato usando il pointBorderColor, pointBackgroundColor, pointBorderWidth, pointRadius, e pointHoverRadius proprietà. C'è anche un pointHitRadius tasto, che determina la distanza alla quale i punti tracciati inizieranno ad interagire con il mouse.
var speedData = labels: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"], set di dati: [label: "Car Speed", dati: [ 0, 59, 75, 20, 20, 55, 40], lineTension: 0, fill: false, borderColor: 'orange', backgroundColor: 'transparent', borderDash: [5, 5], pointBorderColor: 'orange', pointBackgroundColor : 'rgba (255,150,0,0.5)', pointRadius: 5, pointHoverRadius: 10, pointHitRadius: 30, pointBorderWidth: 2, pointStyle: 'rectRounded'];
Quanto sopra speeddata oggetto traccia gli stessi punti dati del grafico precedente ma con valori personalizzati impostati per tutte le proprietà.
Puoi anche tracciare più linee su un singolo grafico e fornire diverse opzioni per disegnare ognuna di esse in questo modo:
var dataFirst = label: "Car A - Speed (mph)", dati: [0, 59, 75, 20, 20, 55, 40], lineTension: 0.3, // Imposta altre opzioni; var dataSecond = label: "Car B - Speed (mph)", dati: [20, 15, 60, 60, 65, 30, 70], // Imposta altre opzioni; var speedData = labels: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"], set di dati: [dataFirst, dataSecondo]; var lineChart = new Chart (speedCanvas, type: 'line', data: speedData);
I grafici a barre sono utili quando si desidera confrontare una singola metrica per entità diverse, ad esempio il numero di automobili vendute da società diverse o il numero di persone in determinati gruppi di età in una città. Puoi creare grafici a barre in Chart.js impostando il genere chiave per bar. Per impostazione predefinita, questo creerà grafici con barre verticali. Se si desidera creare grafici con barre orizzontali, è necessario impostare il genere a barra orizzontale.
var barChart = new Chart (densityCanvas, type: 'bar', data: densityData, options: chartOptions);
Creiamo un grafico a barre che rappresenti la densità di tutti i pianeti nel nostro sistema solare. I dati sulla densità sono stati presi dal Foglio informativo planetario fornito dalla NASA.
var densityData = label: 'Density of Planets (kg / m3)', dati: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638]; var barChart = new Chart (densityCanvas, type: 'bar', data: labels: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturno", "Urano", " Neptune "], set di dati: [densityData]);
I parametri sopra riportati creeranno il seguente grafico:
Proprio come il grafico a linee, anche questa volta le barre sono piene di un grigio chiaro. Puoi cambiare il colore delle barre usando il colore di sfondo chiave. Allo stesso modo, il colore e la larghezza dei bordi delle diverse barre possono essere specificati usando colore del bordo e larghezza del bordo chiavi.
Se vuoi che la libreria salti il disegno del bordo per un bordo particolare, puoi specificare quel bordo come valore di borderSkipped chiave. Puoi impostare il suo valore su superiore, sinistra, parte inferiore, o destra. Puoi anche cambiare il colore del bordo e dello sfondo delle diverse barre quando sono al passaggio del mouse usando il hoverBorderColor e hoverBackgroundColor chiave.
Le barre nel grafico a barre sopra sono state ridimensionate automaticamente. Tuttavia, puoi controllare la larghezza delle singole barre usando il barThickness e barPercentage proprietà. Il barThickness tasto è usato per impostare lo spessore delle barre in pixel, e barPercentage è usato per impostare lo spessore come percentuale della larghezza della categoria disponibile.
Puoi anche mostrare o nascondere un particolare asse usando i suoi display chiave. Impostazione del valore di display a falso nasconderà quell'asse particolare. Puoi leggere ulteriori informazioni su tutte queste opzioni nella pagina della documentazione.
Rendiamo il grafico della densità più interessante sovrascrivendo i valori predefiniti per i grafici a barre usando il seguente codice.
var densityData = label: 'Density of Planets (kg / m3)', dati: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638], backgroundColor: ['rgba (0, 99, 132, 0.6 ) ',' rgba (30, 99, 132, 0.6) ',' rgba (60, 99, 132, 0.6) ',' rgba (90, 99, 132, 0.6) ',' rgba (120, 99, 132 , 0.6) ',' rgba (150, 99, 132, 0.6) ',' rgba (180, 99, 132, 0.6) ',' rgba (210, 99, 132, 0.6) ',' rgba (240, 99 , 132, 0.6) '], borderColor: [' rgba (0, 99, 132, 1) ',' rgba (30, 99, 132, 1) ',' rgba (60, 99, 132, 1) ', 'rgba (90, 99, 132, 1)', 'rgba (120, 99, 132, 1)', 'rgba (150, 99, 132, 1)', 'rgba (180, 99, 132, 1) ',' rgba (210, 99, 132, 1) ',' rgba (240, 99, 132, 1) '], borderWidth: 2, hoverBorderWidth: 0; var chartOptions = scale: yAxes: [barPercentage: 0.5], elementi: rettangolo: borderSkipped: 'left',; var barChart = new Chart (densityCanvas, type: 'horizontalBar', data: labels: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturno", "Urano", " Neptune "], set di dati: [densityData],, options: chartOptions);
Il densityData oggetto è usato per impostare il colore del bordo e dello sfondo delle barre. Ci sono due cose che vale la pena notare nel codice sopra. Innanzitutto, i valori di barPercentage e borderSkipped le proprietà sono state impostate all'interno del chartOptions oggetto invece del dataDensity oggetto.
Secondo, il grafico genere è stato impostato su barra orizzontale questa volta. Questo significa anche che dovrai cambiare il valore di barThickness e barPercentage per l'asse y al posto dell'asse x perché abbiano effetto sulle barre.
I parametri sopra riportati creeranno il seguente grafico a barre.
È anche possibile tracciare più dataset sullo stesso grafico assegnando un id dell'asse corrispondente a un set di dati particolare. Il xAxisID il tasto è usato per assegnare il id di qualsiasi asse x al tuo set di dati. Allo stesso modo, il yAxisID il tasto è usato per assegnare il id di qualsiasi asse y nel tuo set di dati. Entrambi gli assi hanno anche un id chiave che è possibile utilizzare per assegnare ID univoci a loro.
Se l'ultimo paragrafo è stato un po 'confuso, il seguente esempio aiuterà a chiarire le cose.
var densityData = label: 'Density of Planet (kg / m3)', dati: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638], backgroundColor: 'rgba (0, 99, 132, 0.6) ', borderColor:' rgba (0, 99, 132, 1) ', yAxisID: "y-axis-density"; var gravityData = label: 'Gravity of Planet (m / s2)', dati: [3.7, 8.9, 9.8, 3.7, 23.1, 9.0, 8.7, 11.0], backgroundColor: 'rgba (99, 132, 0, 0.6) ', borderColor:' rgba (99, 132, 0, 1) ', yAxisID: "asse y-gravità"; var planetData = labels: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Urano", "Neptune"], set di dati: [densityData, gravityData]; var chartOptions = scale: xAxes: [barPercentage: 1, categoryPercentage: 0.6], yAxes: [id: "y-axis-density", id: "asse y-gravità"] ; var barChart = new Chart (densityCanvas, type: 'bar', data: planetData, options: chartOptions);
Qui, abbiamo creato due assi y con ID univoci e sono stati assegnati a singoli set di dati utilizzando il yAxisID chiave. Il barPercentage e categoryPercentage i tasti sono stati usati qui per raggruppare le barre per i singoli pianeti insieme. Ambientazione categoryPercentage ad un valore più basso aumenta lo spazio tra le barre di diversi pianeti. Allo stesso modo, impostazione barPercentage ad un valore più alto si riduce lo spazio tra le barre dello stesso pianeta.
In questo tutorial, abbiamo trattato tutti gli aspetti dei grafici a linee e dei grafici a barre in Chart.js. Ora dovresti essere in grado di creare grafici di base, modificare il loro aspetto e tracciare più dataset sullo stesso grafico senza problemi. Nella parte successiva della serie, imparerai a conoscere il radar e i grafici ad area polare in Chart.js.
Spero che questo tutorial ti sia piaciuto. Se avete domande, fatemelo sapere nei commenti.
Accentsconagua