Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript

Guida introduttiva a Chart.js: grafici a torta, ad anello e grafici a bolle

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called Getting Started With Chart.js.
Getting Started With Chart.js: Radar and Polar Area Charts
Getting Started With Chart.js: Scales

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

Avete visto quattro diversi tipi di grafico in Chart.js fino a questo punto. La seconda esercitazione della serie copre i grafici a linea e i grafici a barre. La terza esercitazione ha riguardato grafici radar e ad area polare. In questo tutorial, imparerete come utilizzare Chart.js per creare il grafico a torta, ad anello e grafici a bolle.

Creazione di grafici a torta e ad anello

I grafici a torta e ad anello sono utili quando si desidera mostrare la proporzione in cui qualcosa è diviso tra diverse entità. Ad esempio, è possibile utilizzare i grafici a torta per mostrare la percentuale di maschi, femmine e giovani dei leoni in un parco naturale, o la percentuale di voti che hanno ottenuti diversi candidati in un'elezione.

I grafici a torta sono utili solo quando si desidera confrontare un parametro specifico o un insieme di dati. Una cosa importante da tenere a mente è che non è possibile utilizzare i grafici a torta per tracciare entità i cui valori sono pari a zero, perché l'angolo dei settori in un grafico a torta dipende dalla grandezza dei punti dati.

Ciò significa che qualsiasi entità la cui quota è pari a zero non verrà visualizzata sul grafico. Allo stesso modo, è Impossibile tracciare i valori negativi in un grafico a torta. È possibile creare grafici a torta in Chart.js impostando la chiave type su pie. Analogamente, è possibile creare grafici ad anello impostando la chiave type su donut. Ecco un esempio di creazione di questi due grafici:

Creiamo un grafico a torta che mostra i dati di esportazione di petrolio dei primi cinque paesi nel 2015. I dati sono in miliardi di dollari.

È possibile controllare l'aspetto del grafico sopra utilizzando chiavi differenti come cutoutPercentage, che definisce la percentuale del grafico che viene tagliata fuori dal centro. È inoltre possibile specificare l'angolo iniziale del grafico utilizzando la chiave rotation. Analogamente, è possibile anche specificare l'angolo che lo schema esegue durante la tracciatura dei dati utilizzando la chiave circumference.

Ci sono due differenti animazioni che possono essere attivate mentre si disegna un grafico. È possibile specificare se il grafico dovrebbe avere un effetto di rotazione utilizzando la chiave di animateRotate. Allo stesso modo, è inoltre possibile specificare se il grafico ad anello deve essere scalato dal centro utilizzando la chiave di animateScale. Il valore di animateRotate è impostato su true per impostazione predefinita e il valore per animateScale è impostato su false per impostazione predefinita.

Come al solito, è possibile controllare il colore di sfondo, il colore del bordo e la larghezza del bordo di tutti i punti di dati utilizzando rispettivamente le chiavi backgroundColor, borderColor e borderWidth. Allo stesso modo, i valori al passaggio del mouse di tutte queste proprietà possono essere controllati con le chiavi hoverBackgroundColor, hoverBorderColor e hoverBorderWidth.

Ecco il codice per creare un grafico ad anello per i dati di cui sopra. Impostazione del valore rotation pari a -Math.Pi prende come punto di partenza 180 gradi in senso antiorario. Quindi, impostando il valore della circumference su Math.pi disegna il grafico su un semicerchio.

Creazione di grafici a bolle

Grafici a bolle vengono utilizzati per tracciare o visualizzare tre dimensioni (p1, p2, p3) di dati in un grafico. La posizione e la dimensione delle bolle determina il valore dei dati di questi tre punti. L'asse orizzontale rappresenta il primo punto di dati (p1), l'asse verticale rappresenta il secondo punto di dati (p2) e l'area della bolla viene utilizzato per rappresentare il valore del terzo punto dati (p3).

Una cosa che si dovrebbe tenere a mente è che la grandezza del terzo punto dati non è rappresentata dal raggio delle bolle, ma dalla loro zona. Ora, l'area di un cerchio è proporzionale al quadrato del raggio. Ciò significa che è necessario assicurarsi che il raggio della bolla che si traccia è proporzionale alla radice quadrata della grandezza del terzo punto di dati.

È possibile creare grafici a bolle in Chart.js impostando il valore della chiave type su bubble. Ecco un esempio di creazione di un grafico a bolle.

Tracciamo il peso di diversi oggetti conservati in una stanza, utilizzando un grafico a bolle. I dati per il grafico devono essere passati sotto forma di un oggetto. L'oggetto dati deve avere la seguente interfaccia per poter essere stampato correttamente.

Una differenza importante tra tutti gli altri grafici e i grafici a bolle è che il raggio della bolla non viene ridimensionato con il grafico.

Ad esempio, la larghezza delle barre in un grafico a barre può aumentare o diminuire in base alle dimensioni del grafico. La stessa cosa non accade con grafici a bolle. Il raggio delle bolle è sempre uguale al numero esatto di pixel specificato. Ha senso, perché in questo tipo di grafico, il raggio è effettivamente utilizzato per rappresentare dati reali.

Creiamo un grafico a bolle per tracciare la popolazione di cervi in diversi punti in una foresta.

Poiché il raggio qui è proporzionale alla radice quadrata della effettiva grandezza, il numero dei cervi presso (80, 80) è 100 volte di più rispetto al numero di cervi a (0, 100).

Proprio come tutti gli altri tipi di grafico, è possibile controllare il colore di sfondo, il colore del bordo e la larghezza del bordo dei punti tracciati tramite le chiavi backgroundColor, borderColor, borderWidth. Allo stesso modo, è possibile anche specificare il colore di sfondo al passaggio del mouse, colore del bordo al passaggio del mouse e larghezza del bordo al passaggio del mouse utilizzando le chiavi hoverBackgroundColor, hoverBorderColor e hoverBorderWidth.

È inoltre possibile specificare il raggio aggiuntivo che si desidera aggiungere a diverse bolle al passaggio del mouse utilizzando la chiave di hoverRadius. Ricordate che questo raggio viene aggiunto al valore originale per disegnare la bolla su cui passa il mouse. Se la bolla originale aveva un raggio di 10 e hoverRadius è impostato a 5, il raggio della bolla al passaggio del mouse sarà pari a 15.

I parametri di cui sopra avranno creato il seguente grafico a bolle.

Considerazioni finali

In questo tutorial, avete imparato tre altri tipi di grafico disponibili in Chart.js. Si dovrebbe ora essere in grado di scegliere il tipo di grafico appropriato per tracciare i dati e impostare valori specifici per chiavi diverse per controllarne l'aspetto. Nel prossimo tutorial, imparerete come manipolare le scale per diversi tipi di grafico.

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.