Share
Fino ad ora hai imparato a conoscere quattro diversi tipi di grafici in Chart.js. Il secondo tutorial della serie cover line e bar chart. Il terzo tutorial ha discusso i grafici radar e polari. In questo tutorial, imparerai come usare Chart.js per creare grafici a torta, a ciambella e a bolle.
I grafici a torta e ad anello sono utili quando vuoi mostrare la proporzione in cui qualcosa è diviso tra diverse entità. Ad esempio, puoi utilizzare i grafici a torta per mostrare la percentuale di maschi, femmine e giovani di leoni in un parco naturale o la percentuale di voti ottenuti da candidati diversi 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 zero perché l'angolo dei settori in un grafico a torta dipende dalla grandezza dei punti dati.
Ciò significa che qualsiasi entità la cui condivisione è zero non verrà affatto visualizzata sul grafico. Allo stesso modo, non puoi tracciare valori negativi su un grafico a torta. Puoi creare grafici a torta in Chart.js impostando il genere chiave per torta. Allo stesso modo, puoi creare grafici ad anello impostando il genere chiave per ciambella. Ecco un esempio di creazione di questi due grafici:
var pieChart = new Chart (votesCanvas, type: 'pie', dati: votiDati, opzioni: chartOptions); var doughnutChart = new Chart (votesCanvas, type: 'donut', dati: votiData, opzioni: chartOptions);
Creiamo un grafico a torta che mostra i dati sulle esportazioni di petrolio dei primi cinque paesi nel 2015. I dati sono espressi in miliardi di dollari USA.
var data = labels: ["Arabia Saudita", "Russia", "Iraq", "Emirati Arabi Uniti", "Canada"], serie di dati: [dati: [133.3, 86.2, 52.2, 51.2, 50.2], backgroundColor : ["# FF6384", "# 63FF84", "# 84FF63", "# 8463FF", "# 6384FF"]];
È possibile controllare l'aspetto del grafico sopra utilizzando chiavi diverse come cutoutPercentage, che definisce la percentuale del grafico che viene ritagliata dal centro. Puoi anche specificare l'angolo iniziale del grafico usando il rotazione chiave. Allo stesso modo, puoi anche specificare l'angolo che il grafico spazza mentre traccia i dati usando il circonferenza chiave.
Ci sono due diverse animazioni che possono essere attivate mentre si disegna un grafico. È possibile specificare se il grafico deve avere un'animazione di rotazione utilizzando il animateRotate chiave. Allo stesso modo, è anche possibile specificare se il grafico ad anello dovrebbe essere ridimensionato dal centro usando il animateScale chiave. Il valore di animateRotate è impostato per vero per impostazione predefinita, e il valore per animateScale è impostato per falso per impostazione predefinita.
Come al solito, puoi controllare il colore di sfondo, il colore del bordo e la larghezza del bordo di tutti i punti di dati usando il colore di sfondo, colore del bordo, e larghezza del bordo tasti rispettivamente. Allo stesso modo, i valori di hover di tutte queste proprietà possono essere controllati usando hoverBackgroundColor, hoverBorderColor, e hoverBorderWidth chiavi.
Ecco il codice per creare un grafico ad anello per i dati sopra. Impostazione del valore per rotazione uguale a -Math.PI prende quel punto iniziale di 180 gradi in senso antiorario. Quindi, impostando il valore di circonferenza a Math.PI rende il grafico solo un semicerchio.
var oilData = labels: ["Arabia Saudita", "Russia", "Iraq", "Emirati Arabi Uniti", "Canada"], serie di dati: [dati: [133.3, 86.2, 52.2, 51.2, 50.2], backgroundColor : ["# FF6384", "# 63FF84", "# 84FF63", "# 8463FF", "# 6384FF"], borderColor: "black", borderWidth: 2]; var chartOptions = rotation: -Math.PI, cutoutPercentage: 30, circonferenza: Math.PI, legend: position: 'left', animation: animateRotate: false, animateScale: true;
I grafici a bolle vengono utilizzati per tracciare o visualizzare tre dimensioni (p1, p2, p3) di dati su un grafico. La posizione e la dimensione delle bolle determinano il valore di questi tre punti dati. L'asse orizzontale rappresenta il primo punto dati (p1), l'asse verticale rappresenta il secondo punto dati (p2) e l'area della bolla viene utilizzata per rappresentare il valore del terzo punto dati (p3).
Una cosa che dovresti tenere a mente è che la grandezza del terzo punto dati non è rappresentata dal raggio delle bolle ma dalla loro area. Ora, l'area di un cerchio è proporzionale al quadrato del raggio. Ciò significa che è necessario assicurarsi che il raggio della bolla che si trama sia proporzionale alla radice quadrata della grandezza del terzo punto dati.
Puoi creare grafici a bolle in Chart.js impostando il valore di genere chiave per bolla. Ecco un esempio di creazione di un grafico a bolle.
var bubbleChart = new Chart (popCanvas, type: 'bubble', dati: popData, opzioni: chartOptions);
Tracciamo il peso di diversi oggetti tenuti in una stanza usando 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 essere tracciato correttamente.
X:, y: , r:
Una differenza importante tra i grafici a bolle e tutti gli altri grafici è 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 succede con i 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 viene effettivamente utilizzato per rappresentare i dati reali.
Creiamo un grafico a bolle per tracciare la popolazione di cervi in diversi punti di una foresta.
var popData = dataset: [label: ['Deer Population'], dati: [x: 100, y: 0, r: 10, x: 60, y: 30, r: 20, x : 40, y: 60, r: 25, x: 80, y: 80, r: 50, x: 20, y: 30, r: 25, x: 0, y: 100, r : 5], backgroundColor: "# FF9966"];
Poiché il raggio qui è proporzionale alla radice quadrata della grandezza effettiva, il numero di cervi a (80, 80) è 100 volte più del numero di cervi a (0, 100).
Proprio come tutti gli altri tipi di grafico, puoi controllare il colore di sfondo, il colore del bordo e la larghezza del bordo dei punti tracciati usando il colore di sfondo, colore del bordo, e larghezza del bordo chiavi. Allo stesso modo, puoi anche specificare il colore di sfondo al passaggio del mouse, il colore del bordo del passaggio del mouse e la larghezza del bordo del passaggio del mouse usando hoverBackgroundColor, hoverBorderColor, e hoverBorderWidth chiavi.
È inoltre possibile specificare il raggio aggiuntivo che si desidera aggiungere a diverse bolle su hover utilizzando il hoverRadius chiave. Ricorda che questo raggio viene aggiunto al valore originale per disegnare la bolla stazionata. Se la bolla originale aveva un raggio di 10 e hoverRadius è impostato su 5, il raggio della bolla al passaggio del mouse sarà pari a 15.
var popData = dataset: [label: ['Deer Population'], dati: [x: 100, y: 0, r: 10, x: 60, y: 30, r: 20, x : 40, y: 60, r: 25, x: 80, y: 80, r: 50, x: 20, y: 30, r: 25, x: 0, y: 100, r : 5], backgroundColor: "# 9966FF", hoverBackgroundColor: "# 000000", hoverBorderColor: "# 9966FF", hoverBorderWidth: 5, hoverRadius: 5];
I parametri sopra indicati creeranno il seguente grafico a bolle.
In questo tutorial, hai imparato a conoscere altri tre tipi di grafici disponibili in Chart.js. Ora dovresti essere in grado di scegliere il tipo di grafico appropriato per tracciare i tuoi dati e impostare valori specifici per chiavi diverse per controllarne l'aspetto. Nel prossimo tutorial, imparerai come manipolare le scale per diversi tipi di grafici.
Spero che questo tutorial ti sia piaciuto. Se avete domande, fatemelo sapere nei commenti.
Accentsconagua