Share
Negli ultimi quattro tutorial, hai appreso molto su Chart.js. Dopo aver letto i primi quattro tutorial, ora dovresti essere in grado di personalizzare i tooltip e le etichette, cambiare i caratteri e creare diversi tipi di grafici. Un aspetto di Chart.js che non è stato ancora trattato in questa serie è la scala.
Le bilance sono cambiate molto dalla versione v1.0 della libreria e ora sono molto più potenti. In questo tutorial, imparerai come manipolare le scale e controllarne l'aspetto utilizzando diverse opzioni fornite dalla libreria.
Tutte le opzioni di configurazione per le linee della griglia sono nidificate sotto l'opzione di scala nel linee della griglia chiave. Questa chiave definisce le opzioni per personalizzare le linee della griglia eseguite perpendicolarmente agli assi. Cambiamo le linee della griglia del grafico a linee che hai creato nell'esercitazione per grafici e grafici a barre.
Puoi mostrare o nascondere le linee della griglia di un grafico usando il display chiave. Il suo valore iniziale è vero, quindi le linee della griglia sono mostrate di default. Il colore delle linee della griglia può essere specificato usando il colore chiave. Se si desidera che le linee della griglia siano composte da trattini anziché essere linee continue, è possibile fornire un valore per la lunghezza e la spaziatura dei trattini come valore del borderDash chiave. È possibile impostare la larghezza e il colore delle linee per il primo o l'indice zero utilizzando il zeroLineWidth e zeroLineColor tasti rispettivamente.
In tutti i grafici fino a questo punto, le scale non avevano alcun testo descrittivo per consentire agli spettatori di sapere che cosa rappresentava un determinato asse. Questo può rendere i grafici meno utili. Ad esempio, se vedi un grafico della velocità della macchina e non riesci a capire l'unità in cui la velocità è tracciata sull'asse y, il grafico è praticamente inutile.
Puoi mostrare o nascondere le etichette della scala su un grafico usando il display chiave. Le etichette della scala sono nascoste per impostazione predefinita. Il testo che dovrebbe essere mostrato su queste scale può essere specificato usando labelString chiave. Puoi anche controllare il colore, la famiglia, la dimensione e lo stile del carattere usando il colore del carattere, famiglia di font, dimensione del font, e stile del font tasti rispettivamente.
Ecco lo stesso vecchio grafico della velocità dell'auto con un diverso set di opzioni di grafico specificato.
var chartOptions = legend: display: true, position: 'top', labels: boxWidth: 80, fontColor: 'black', scale: xAxes: [gridLines: display: false, colour: "nero ", scaleLabel: display: true, labelString:" Tempo in secondi ", fontColor:" red "], yAxes: [gridLines: color:" black ", borderDash: [2, 5],, scaleLabel: display: true, labelString: "Velocità in miglia all'ora", fontColor: "green"];
C'è un'altra chiave chiamata offsetGridLines. Quando impostato su vero, sposta le etichette al centro delle linee della griglia. Questo è generalmente utile quando si creano grafici a barre.
Le scale lineari sono utilizzate per tracciare dati numerici. Queste scale possono essere create sull'asse x o y. Nella maggior parte dei casi, Chart.js rileva automaticamente i valori minimi e massimi per le bilance. Tuttavia, questo può causare una certa confusione.
Diciamo che vuoi tracciare i voti degli studenti in una classe. Se i voti massimi per il test erano 200 ma nessuno degli studenti ha segnato più di 180 punti, la scala sarà probabilmente al massimo a 180. In questi casi, i lettori non avranno modo di sapere se i voti massimi fossero 180 o 200.
Chart.js ha più opzioni integrate che ti consentono di controllare diverse chiavi per le scale. È possibile specificare il valore minimo e massimo per le scale usando il min e max chiavi. Le dimensioni del gradino delle scale possono essere controllate usando dimensione del passo proprietà. In questo modo, puoi determinare quante linee di griglia devono essere tracciate sul grafico. Un altro modo per impostare un limite al numero di linee della griglia e ai segni di spunta mostrati su un grafico è di usare il maxTicksLimit chiave.
Ecco il codice per specificare i valori di scala minima e massima per la scala orizzontale sul grafico a barre per un tutorial precedente di questa serie.
var chartOptions = scale: yAxes: [barPercentage: 0.5, gridLines: display: false], xAxes: [gridLines: zeroLineColor: "black", zeroLineWidth: 2, tick: min: 0, max: 6500, stepSize: 1300, scaleLabel: display: true, labelString: "Densità in kg / m3"], elementi: rettangolo: borderSkipped: 'left',;
Proprio come la scala lineare, puoi anche creare scale logaritmiche per tracciare valori sul tuo grafico. In questo caso, l'interpolazione logaritmica viene utilizzata per determinare la posizione di un punto sugli assi. Queste scale possono anche essere posizionate sia sull'asse x che sull'asse y.
Questo tipo di scala viene utilizzato per i tipi di grafico ad area radar e polare. A differenza della scala lineare regolare, questa si sovrappone all'area del grafico anziché essere posizionata sull'asse.
Ci sono molte chiavi specificamente mirate alle scale radiali. Ad esempio, puoi usare il lineArc chiave per specificare se le linee della griglia devono essere circolari o diritte. Il valore predefinito è falso per grafici radar e vero per i grafici area polare.
È possibile controllare l'aspetto delle linee che si irradiano dal centro del grafico alle sue etichette punto utilizzando il angleLines chiave. Accetta un oggetto come valore. L'oggetto può contenere chiavi per controllare il colore e la larghezza delle linee degli angoli. È possibile nascondere le linee dell'angolo impostando il valore di display chiave per falso. Il colore e la larghezza delle linee degli angoli possono essere controllati usando il colore e larghezza della linea chiavi.
L'aspetto delle etichette punto può essere controllato utilizzando il pointLabels chiave. Proprio come le linee d'angolo, questa chiave accetta anche un oggetto come valore. Si noti che queste opzioni hanno effetto solo quando il valore di lineArc è impostato per falso. Il colore, la famiglia, la dimensione e lo stile del carattere possono essere specificati usando colore del carattere, famiglia di font, dimensione del font, e stile del font chiavi.
Puoi anche impostare un valore minimo e massimo per la scala usando il min e max chiavi. La dimensione del passo e il numero massimo di zecche sulla scala possono essere specificati utilizzando dimensione del passo e maxTicksLimit chiavi. Queste opzioni sono disponibili sotto zecche chiave. Alcuni altri tasti disponibili all'interno zecche siamo showLabelBackdrop, backdropColor, backdropPaddingX, e backDropPaddingY. Puoi usarli per mostrare o nascondere lo sfondo dietro le etichette di spunta e controllarne larghezza, altezza e colore.
Puoi anche usare il linee della griglia chiave utilizzata per il grafico a linee per impostare un colore e una larghezza per le linee della griglia in un grafico radar. Ecco alcune opzioni per creare un grafico radar con scale personalizzate.
var chartOptions = scale: gridLines: color: "black", lineWidth: 3, angleLines: display: false, tick: beginAtZero: true, min: 0, max: 100, stepSize: 20, pointLabels : fontSize: 18, fontColor: "green", legend: position: 'left';
È possibile utilizzare una scala temporale per visualizzare orari e date su un grafico. Come menzionato nell'esercitazione introduttiva di Chart.js, devi includere Moment.js nei tuoi progetti per visualizzare il tempo. Una restrizione sull'uso di una scala temporale è che può essere visualizzata solo sull'asse x. Tutte le opzioni di configurazione per la scala temporale si trovano sotto tempo Sub-opzione.
Per creare una scala temporale, devi impostare il valore di genere chiave per tempo sotto il xAxes sub-opzione. Successivamente, puoi impostare il valore di diversi tasti sotto tempo. L'unità che dovrebbe essere utilizzata per disegnare le zecche è impostata usando unità chiave.
Il passo dell'unità può essere specificato usando il unitStepSize chiave. Il formato in cui devono essere visualizzate le etichette per le zecche è specificato utilizzando displayFormats sub-opzione. Puoi leggere ulteriori informazioni sui formati di stringhe consentiti sul sito web Moment.js.
Il formato in cui viene visualizzata l'ora nelle descrizioni comandi può essere specificato utilizzando tooltipFormat chiave.
Puoi anche arrotondare il tempo prima di tracciarlo sul grafico usando il il giro chiave. Fai attenzione quando imposti un valore per il giro. Diciamo che ne hai impostato il valore ora e ci sono due volte che devono essere tracciati sul grafico. Se una volta sono le 5:30 e le altre 5:50, verranno entrambe tracciate sul segno di spunta alle 5:00. Impostare il suo valore su minuto li traccerà rispettivamente sui 5:30 e 5:50.
Il grafico a linee tracciato all'inizio del tutorial può essere tracciato utilizzando una scala temporale con l'aiuto del seguente codice.
var chartOptions = legend: display: true, position: 'top', labels: boxWidth: 80, fontColor: 'black', scale: xAxes: [type: "time", tempo: unità: 'hour', unitStepSize: 0.5, round: 'hour', tooltipFormat: "h: mm: ss a", displayFormats: hour: 'MMM D, h: mm A'], yAxes: [gridLines: color: "black", borderDash: [2, 5],, scaleLabel: display: true, labelString: "Velocità in miglia all'ora", fontColor: "green"];
Questo tutorial ti ha aiutato a conoscere diversi tipi di scale in Chart.js. Ora puoi personalizzare facilmente le scale in un grafico controllandone il colore, il valore minimo e massimo, il numero di zecche e altri fattori simili.
Dopo aver letto tutti e cinque i tutorial di questa serie, ora dovresti essere in grado di creare tutti i tipi di grafici disponibili in Chart.js. Spero ti sia piaciuto il tutorial e la serie.
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, fatemelo sapere nei commenti. Hai mai usato questa libreria nei tuoi progetti? Si prega di condividere alcuni suggerimenti nei commenti.
Accentsconagua