Guida introduttiva a Chart.js: grafici a linee e a barre

Italian (Italiano) translation by Francesco Turlon (you can also view the original English article)

Nel primo tutorial introduttivo della serie su Chart.js, è stato descritto come installare e utilizzare Chart.js in un progetto. Avete anche imparato alcune opzioni di configurazione globale che possono essere utilizzate per modificare i font e le descrizioni dei tooltip di diversi grafici. In questo tutorial, imparerete come creare grafici a barre e a linee in Chart.js.

Creazione di grafici a linee

I grafici a linee sono utili quando si desidera visualizzare le modifiche nel valore di una determinata variabile per quanto riguarda i cambiamenti in qualche altra variabile. L'altra variabile è di solito il tempo. Ad esempio, i grafici a linee permettono di visualizzare la velocità di un veicolo durante intervalli di tempo specifici.

Chart.js permette di creare grafici a linee impostando la chiave type su line. Ecco un esempio:

var lineChart = new Chart(speedCanvas, {
    type: 'line',
    data: speedData,
    options: chartOptions
});

Ci sarà ora da fornire i dati, nonché le opzioni di configurazione che abbiamo bisogno per tracciare il grafico a linee.

var speedData = {
  labels: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"],
  datasets: [{
    label: "Car Speed",
    data: [0, 59, 75, 20, 20, 55, 40],
  }]
};

var chartOptions = {
  legend: {
    display: true,
    position: 'top',
    labels: {
      boxWidth: 80,
      fontColor: 'black'
    }
  }
};

Poiché non abbiamo indicato alcun colore per il grafico a linee, verrà utilizzato il colore rgba(0,0,0,0.1) predefinito. Non abbiamo fatto alcuna modifica al tooltip o alla legenda. Potete leggere di più su come modificare le dimensioni del grafico,il tooltip o la legenda nella prima parte della serie.

In questa parte, ci concentreremo sulle varie opzioni disponibili specificamente per la modifica di grafici a linee. Tutte le opzioni e i dati che abbiamo fornito sopra formeranno il seguente grafico.

Il colore dell'area sotto la curva è determinato dalla chiave backgroundColor. Tutti i grafici a linee disegnati utilizzando questo metodo saranno riempiti con il colore specificato. È possibile impostare il valore della chiave fill su false se si desidera solo disegnare una linea e non riempirla con alcun colore.

Un'altra cosa che potreste aver notato è che stiamo usando per tracciare i punti di dati separati. La libreria interpola automaticamente i valori di tutti gli altri punti utilizzando algoritmi interni.

Per impostazione predefinita, i punti vengono tracciati utilizzando un'interpolazione cubica ponderata personalizzata. Tuttavia, è possibile anche impostare il valore della chiave cubicInterpolationMode su monotone per tracciare punti più accuratamente se il grafico viene definito mediante l'equazione y = f (x). La tensione della curva di Bezier tracciata è determinata dalla chiave lineTension. È possibile impostare il valore a zero per disegnare linee rette. Siete pregati di notare che questa chiave viene ignorata quando il valore di cubicInterpolationMode è già stato specificato.

È anche possibile impostare il valore del colore del bordo e la sua larghezza utilizzando le chiavi borderColor e borderWidth. Se si desidera tracciare il grafico utilizzando una linea tratteggiata invece di una linea continua, è possibile utilizzare la chiave borderDash. Accetta un array come valore i cui elementi determinano la lunghezza e la spaziatura dei trattini rispettivamente.

L'aspetto dei punti tracciati può essere controllato utilizzando le proprietà pointBorderColor, pointBackgroundColor, pointBorderWidth, pointRadius e pointHoverRadius. C'è anche una chiave di pointHitRadius, che determina la distanza alla quale i punti tracciati cominceranno ad interagire con il mouse.

var speedData = {
  labels: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"],
  datasets: [{
    label: "Car Speed",
    data: [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'
  }]
};

L'oggetto speedData sopra disegna gli stessi punti di dati come nel grafico precedente, ma con valori personalizzati per tutte le proprietà.

È anche possibile tracciare linee multiple in un singolo grafico e fornire diverse opzioni per disegnare ciascuna di esse come in questo esempio:

var dataFirst = {
  label: "Car A - Speed (mph)",
  data: [0, 59, 75, 20, 20, 55, 40],
  lineTension: 0.3,
  // Set More Options
};
  
var dataSecond = {
  label: "Car B - Speed (mph)",
  data: [20, 15, 60, 60, 65, 30, 70],
  // Set More Options
};
  
var speedData = {
  labels: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"],
  datasets: [dataFirst, dataSecond]
};


var lineChart = new Chart(speedCanvas, {
  type: 'line',
  data: speedData
});

Creazione di grafici a barre

I grafici a barre sono utili quando si desidera confrontare una singola metrica per entità diverse — ad esempio, il numero di auto vendute da aziende diverse o il numero di persone di determinati gruppi di età in una città. È possibile creare grafici a barre in Chart.js impostando la chiave type su bar. Per impostazione predefinita, questo creerà grafici con barre verticali. Se si desidera creare grafici con barre orizzontali, sarà necessario impostare type su horizontalBar.

var barChart = new Chart(densityCanvas, {
    type: 'bar',
    data: densityData,
    options: chartOptions
});

Creiamo un grafico a barre che traccia la densità di tutti i pianeti nel nostro sistema solare. I dati di densità sono stati presi dal Planetary Fact Sheet fornito dalla NASA.

var densityData = {
  label: 'Density of Planets (kg/m3)',
  data: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638]
};

var barChart = new Chart(densityCanvas, {
  type: 'bar',
  data: {
    labels: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"],
    datasets: [densityData]
  }
});

I parametri forniti sopra creeranno il seguente grafico:

Proprio come il grafico a linee, le barre sono riempite con un colore grigio chiaro anche questa volta. È possibile modificare il colore delle barre utilizzando la chiave backgroundColor. Allo stesso modo, il colore e lo spessore dei bordi di diverse barre possono essere specificati utilizzando le chiavi borderColor e borderWidth.

Se si desidera che la libreria non disegni il bordo per un punto specifico del disegno, è possibile specificare quel punto come un valore della chiave borderSkipped. È possibile impostare il valore per top, left, bottom, or right. È anche possibile modificare il colore di sfondo e bordo di diverse barre quando il puntatore del mouse si poggia su di essi utilizzando la chiave hoverBorderColor e hoverBackgroundColor.

Le barre nel grafico a barre sopra sono state ridimensionate automaticamente. Tuttavia, è possibile controllare la larghezza delle singole barre utilizzando le proprietà barThickness e barPercentage. La chiave barThickness viene utilizzata per impostare lo spessore delle barre in pixel, e barPercentage viene utilizzato per impostare lo spessore come percentuale della larghezza della categoria disponibile.

È inoltre possibile mostrare o nascondere uno specifico asse utilizzando la sua chiave display. Impostando il valore del display su false nasconderà quello specifico asse. Potete leggere di più su tutte queste opzioni nella pagina di documentazione.

Rendiamo più interessante il grafico della densità sovrascrivendo i valori predefiniti per grafici a barre utilizzando il seguente codice.

1	var densityData = {
2	label: 'Density of Planets (kg/m3)',
3	data: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638],
4	backgroundColor: [
5	'rgba(0, 99, 132, 0.6)',
6	'rgba(30, 99, 132, 0.6)',
7	'rgba(60, 99, 132, 0.6)',
8	'rgba(90, 99, 132, 0.6)',
9	'rgba(120, 99, 132, 0.6)',
10	'rgba(150, 99, 132, 0.6)',
11	'rgba(180, 99, 132, 0.6)',
12	'rgba(210, 99, 132, 0.6)',
13	'rgba(240, 99, 132, 0.6)'
14	],
15	borderColor: [
16	'rgba(0, 99, 132, 1)',
17	'rgba(30, 99, 132, 1)',
18	'rgba(60, 99, 132, 1)',
19	'rgba(90, 99, 132, 1)',
20	'rgba(120, 99, 132, 1)',
21	'rgba(150, 99, 132, 1)',
22	'rgba(180, 99, 132, 1)',
23	'rgba(210, 99, 132, 1)',
24	'rgba(240, 99, 132, 1)'
25	],
26	borderWidth: 2,
27	hoverBorderWidth: 0
28	};
29
30	var chartOptions = {
31	scales: {
32	yAxes: [{
33	barPercentage: 0.5
34	}]
35	},
36	elements: {
37	rectangle: {
38	borderSkipped: 'left',
39	}
40	}
41	};
42
43	var barChart = new Chart(densityCanvas, {
44	type: 'horizontalBar',
45	data: {
46	labels: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"],
47	datasets: [densityData],
48	},
49	options: chartOptions
50	});

L'oggetto densityData viene utilizzato per impostare il colore di sfondo e bordo delle barre. Ci sono due cose da notare nel codice precedente. In primo luogo, i valori delle proprietà barPercentage e borderSkipped sono stati impostati all'interno dell'oggetto chartOptions anziché dell'oggetto dataDensity.

In secondo luogo, il type del grafico è stato impostato a horizontalBar questa volta. Questo significa anche che si dovrà modificare il valore di barThickness e barPercentage per l'asse y invece che per l'asse x affinchè non abbiano alcun effetto sulle barre.

I parametri forniti sopra creeranno il seguente grafico a barre.

È inoltre possibile tracciare più set di dati sullo stesso grafico assegnando un id dell'asse corrispondente a un particolare set di dati. La chiave di xAxisID viene utilizzata per assegnare l'id di qualsiasi asse x al set di dati. Allo stesso modo, la chiave di yAxisID viene utilizzata per assegnare l'id di qualsiasi asse y al set di dati. Entrambi gli assi hanno anche una chiave di id che è possibile utilizzare per assegnare un ID univoco.

Se l'ultimo paragrafo è stato un po' di confusionario, l'esempio seguente renderà le cose chiare.

var densityData = {
  label: 'Density of Planet (kg/m3)',
  data: [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)',
  data: [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: "y-axis-gravity"
};

var planetData = {
  labels: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"],
  datasets: [densityData, gravityData]
};

var chartOptions = {
  scales: {
    xAxes: [{
      barPercentage: 1,
      categoryPercentage: 0.6
    }],
    yAxes: [{
      id: "y-axis-density"
    }, {
      id: "y-axis-gravity"
    }]
  }
};

var barChart = new Chart(densityCanvas, {
  type: 'bar',
  data: planetData,
  options: chartOptions
});

Qui abbiamo creato due assi y con ID univoci, e sono stati assegnati ai singoli DataSet utilizzando la chiave di yAxisID. Le chiavi barPercentage e categoryPercentage sono state utilizzate qui per raggruppare le barre per singoli pianeti. L'impostazione di categoryPercentage su un valore inferiore aumenta lo spazio tra le barre di pianeti diversi. Allo stesso modo, impostando barPercentage su un valore superiore riduce lo spazio tra le barre dello stesso pianeta.

Considerazioni finali

In questo tutorial, abbiamo visto tutti gli aspetti di grafici a linee e grafici a barre in Chart.js. Si dovrebbe ora essere in grado di creare grafici base, modificare il loro aspetto e la visualizzazione di più set di dati sullo stesso grafico senza problemi. Nella parte successiva della serie, potrete conoscere i grafici radar e zona polare in Chart.js.

Spero che vi sia piaciuto questo tutorial. Se avete domande, per favore fatemelo sapere nei commenti.