Share
Il precedente tutorial di questa serie si concentrava sulla creazione di grafici a barre ea linee usando Chart.js. Entrambi questi grafici hanno i propri usi e opzioni di configurazione che sono stati trattati in dettaglio nell'ultimo tutorial.
In questo tutorial, imparerai a conoscere due nuovi tipi di grafici che possono essere creati usando Chart.js: radar e grafici ad area polare. Proprio come il precedente tutorial, inizieremo con una breve panoramica dei tipi di grafici e quindi passeremo a una discussione più dettagliata.
I grafici a linee e a barre sono utili quando si desidera confrontare solo una o due proprietà di un numero elevato di oggetti, ad esempio la popolazione di tutti i paesi in Asia o il numero di diversi inquinanti nell'atmosfera.
Diciamo che vuoi confrontare la densità, l'opacità, la viscosità, l'indice di rifrazione e il punto di ebollizione di soli tre liquidi diversi. La creazione di un grafico a barre per questi dati sarà problematica in quanto sarà necessario creare cinque colonne diverse per ciascun liquido. Sarà anche difficile confrontare le proprietà corrispondenti dei liquidi.
In situazioni in cui è necessario confrontare molte proprietà di pochi oggetti, la creazione di un grafico radar è il metodo più efficace di visualizzazione e confronto dei dati. Questi grafici sono anche noti come grafici spider.
Da Wikipedia, un grafico radar è un metodo grafico di visualizzazione di dati multivariati sotto forma di un grafico bidimensionale di tre o più variabili quantitative rappresentate su assi a partire dallo stesso punto. Le posizioni relative e gli angoli degli assi sono in genere non informativi.
Creiamo la nostra prima tabella radar ora. I grafici radar vengono creati impostando il genere digitare Chart.js in radar. Ecco un esempio molto semplice.
var radarChart = new Chart (marksCanvas, type: 'radar', data: marksData, options: chartOptions);
Tracciamo i segni di due studenti di una classe in cinque soggetti diversi. Ecco il codice per fornire i dati per la creazione del grafico.
var marksData = labels: ["English", "Maths", "Physics", "Chemistry", "Biology", "History"], set di dati: [label: "Student A", backgroundColor: "rgba (200, 0,0,0.2) ", dati: [65, 75, 70, 80, 60, 80], etichetta:" Studente B ", backgroundColor:" rgba (0,0,200,0.2) ", dati: [54 , 65, 60, 70, 70, 75]]; var radarChart = new Chart (marksCanvas, type: 'radar', data: marksData);
Il primo grafico che di solito creiamo non ha colori di sfondo appositamente impostati da noi. Tuttavia, i grafici radar possono avere molte sovrapposizioni, rendendo difficile identificare correttamente i punti dati senza codifica a colori.
Per questo motivo, è stato assegnato un colore a ciascun set di dati utilizzando il colore di sfondo chiave. La seguente demo mostra il risultato finale del nostro codice. Come puoi vedere, ora è molto facile confrontare le prestazioni di entrambi gli studenti in diverse materie.
Oltre al colore di sfondo, puoi anche cambiare il colore del bordo e la larghezza del bordo per il grafico usando il colore del bordo e larghezza del bordo chiavi. È anche possibile creare bordi tratteggiati anziché linee continue usando il borderDash chiave. Questa chiave accetta un array come valore.
Il primo elemento dell'array determina la lunghezza dei trattini e il secondo elemento determina lo spazio tra di essi. Puoi anche fornire un valore di offset per disegnare i trattini usando il borderDashOffset chiave.
Puoi anche controllare il colore e la larghezza del bordo per i punti tracciati usando il pointBorderColor e pointBorderWidth. Allo stesso modo, puoi anche impostare un colore di sfondo per punti diversi usando il pointBackgroundColor chiave. La dimensione dei punti tracciati può essere specificata usando il pointRadius chiave. Puoi controllare la distanza in cui i punti dovrebbero iniziare a interagire con il mouse usando il pointHitRadius chiave.
Puoi anche controllare l'aspetto dei punti tracciati al passaggio del mouse usando il pulsante pointHoverBackgroundColor, pointHoverBorderColor e pointHoverBorderWidth chiavi. Una cosa che devi ricordare è che queste chiavi di hover non aspetteranno che tu stia effettivamente al passaggio del mouse sopra l'elemento per essere attivato. Le modifiche diventeranno effettive non appena ci si trova all'interno del raggio di impatto impostato sopra.
Ci sono molte forme disponibili per i punti tracciati. Sono circolari per impostazione predefinita. Tuttavia, puoi modificare la forma in triangolo, rect, rectRounded, rectRot, attraversare, crossRot, stella, linea, e trattino.
Usiamo tutti questi tasti per ridisegnare il grafico radar precedente. Ecco il codice per fornire opzioni di configurazione per i set di dati e le scale.
var marksData = labels: ["English", "Maths", "Physics", "Chemistry", "Biology", "History"], set di dati: [label: "Student A", backgroundColor: "transparent", borderColor : "rgba (200,0,0,0.6)", fill: false, raggio: 6, pointRadius: 6, pointBorderWidth: 3, pointBackgroundColor: "orange", pointBorderColor: "rgba (200,0,0,0.6)" , pointHoverRadius: 10, dati: [65, 75, 70, 80, 60, 80], label: "Studente B", backgroundColor: "transparent", borderColor: "rgba (0,0,200,0.6)", riempimento : false, raggio: 6, pointRadius: 6, pointBorderWidth: 3, pointBackgroundColor: "cornflowerblue", pointBorderColor: "rgba (0,0,200,0.6)", pointHoverRadius: 10, dati: [54, 65, 60, 70, 70 , 75]]; var chartOptions = scale: tick: beginAtZero: true, min: 0, max: 100, stepSize: 20, pointLabels: fontSize: 18, legend: position: 'left';
Dentro il chartOptions oggetto, il min e max i valori sono usati per impostare i valori minimo e massimo per la scala. Il dimensione del passo la chiave può essere utilizzata per indicare a Chart.js il numero di passaggi da eseguire min a max. Ecco il risultato finale del codice sopra.
I grafici ad area polare sono simili ai grafici a torta. Due principali differenze tra questi grafici sono che nei grafici ad area polare tutti i settori hanno angoli uguali e il raggio di ciascun settore dipende dal valore tracciato. Questi grafici sono usati per tracciare i fenomeni ciclici. Ad esempio, puoi utilizzarlo per tracciare il numero di uccelli migratori di una determinata specie nella tua zona in ogni stagione dell'anno.
Il raggio di ciascun settore in questi grafici è proporzionale alla radice quadrata del numero di oggetti corrispondenti. Nel caso degli uccelli migratori, il raggio sarà proporzionale alla radice quadrata del numero di uccelli nella tua zona.
Puoi creare grafici ad area polare in Chart.js impostando il comando genere chiave per polarArea. Ecco il codice di base di cui hai bisogno per creare un grafico polare.
var polarAreaChart = new Chart (birdsCanvas, type: 'polarArea', dati: birdsData, opzioni: chartOptions);
Ecco il codice per tracciare il numero di uccelli migratori su un grafico ad area polare. Gli unici dati forniti a questo punto sono il numero di uccelli e il colore di sfondo per le diverse stagioni.
var birdsData = labels: ["Spring", "Summer", "Fall", "Winter"], set di dati: [data: [1200, 1700, 800, 200], backgroundColor: ["rgba (255, 0, 0, 0.5) "," rgba (100, 255, 0, 0.5) "," rgba (200, 50, 255, 0.5) "," rgba (0, 100, 255, 0.5) "]]; var polarAreaChart = new Chart (birdsCanvas, type: 'polarArea', data: birdsData);
Il codice sopra creerà il seguente grafico polare.
Il grafico ad area polare fornisce le solite opzioni per impostare il colore di sfondo, larghezza del bordo, colore del bordo, hoverBackgroundColor, hoverBorderWidth, e hoverBorderColor. Ci sono anche alcuni tasti specifici per l'area polare che puoi usare per personalizzare il loro aspetto.
Ad esempio, è possibile impostare l'angolo iniziale per il primo valore nel set di dati utilizzando startAngle chiave. Allo stesso modo, il lineArc chiave che può essere trovata sotto scala può essere usato per specificare se le linee tracciate devono essere circolari o meno impostandone il valore vero o falso rispettivamente.
I settori disegnati nel grafico ad area polare sono entrambi ruotati e ridimensionati per impostazione predefinita. Tuttavia, è possibile impedire l'animazione di ridimensionamento impostando il valore di animateScale chiave per false. Allo stesso modo, l'animazione rotante può essere disattivata impostando il valore di animateRotate chiave per false. Entrambe queste chiavi sono disponibili sotto animazione.
Il codice sottostante modifica il valore di alcuni tasti per rendere il grafico più accattivante.
var birdsData = labels: ["Spring", "Summer", "Fall", "Winter"], set di dati: [data: [1200, 1700, 800, 200], backgroundColor: ["rgba (255, 0, 0, 0.6) "," rgba (0, 255.200, 0.6) "," rgba (200, 0, 200, 0.6) "," rgba (0, 255, 0, 0.6) "], borderColor:" rgba (0 , 0, 0, 0.8) "]; var chartOptions = startAngle: -Math.PI / 4, legend: position: 'left', animation: animateRotate: false; var polarAreaChart = new Chart (birdsCanvas, type: 'polarArea', dati: birdsData, opzioni: chartOptions);
Oltre a ruotare il grafico e disabilitare l'animazione di rotazione, abbiamo anche spostato la legenda a sinistra del grafico impostando il valore di posizione a sinistra. Questo lascia abbastanza spazio nella parte superiore del grafico per visualizzarlo correttamente.
In questo tutorial, hai imparato a conoscere le applicazioni dei grafici radar e delle aree polari. Successivamente, hai imparato come creare grafici di base e personalizzarli con varie opzioni di configurazione disponibili in Chart.js. Imparerai a conoscere grafici a torta e a bolle nella prossima parte della serie.
Se stai lavorando con il web, specialmente sul front-end, JavaScript è importante sapere. Naturalmente, non è senza le sue curve di apprendimento, e ci sono un sacco di quadri e librerie per tenerti occupato, pure. Se stai cercando ulteriori risorse da studiare o da utilizzare nel tuo lavoro, dai un'occhiata a ciò che abbiamo a disposizione sul mercato Envato.
Se avete domande su questo tutorial, fatemelo sapere nei commenti.
Accentsconagua