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

Guida introduttiva a Chart.js: scale

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Getting Started With Chart.js.
Getting Started With Chart.js: Pie, Doughnut, and Bubble Charts

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

Nelle ultime quattro esercitazioni, hai imparato molto su Chart.js. Dopo aver letto i primi quattro tutorial, si dovrebbe ora essere in grado di personalizzare i tooltip e le etichette, modificare i font e creare diversi tipi di grafici. Un aspetto di Chart.js che ancora non è stato analizzato in questa serie sono le scale.

Le scale sono cambiate molto dalla versione v1.0 della libreria e ora sono molto più potenti. In questo tutorial, imparerete come manipolare scale e controllarne l'aspetto utilizzando le diverse opzioni che fornisce la libreria.

Cambiare le linee della griglia

Tutte le opzioni di configurazione per le linee di griglia sono nidificate sotto l'opzione scala nella chiave gridLines. Questa chiave definisce le opzioni per personalizzare le linee della griglia che corrono perpendicolari agli assi. Cambiamo le linee della griglia del grafico a linee che abbiamo creato nell'esercitazione su grafici di linea e grafici a barre.

È possibile mostrare o nascondere le linee della griglia di un grafico utilizzando la chiave display. Valore iniziale è true, quindi le linee della griglia vengono visualizzate per impostazione predefinita. Il colore delle linee della griglia può essere specificato utilizzando la chiave color. Se si desidera che le linee della griglia siano composte da trattini invece di essere linee continue, è possibile fornire un valore per la lunghezza e la spaziatura dei trattini come valore della chiave borderDash. È possibile impostare la larghezza e il colore delle linee per l'indice uno o zero utilizzando le chiavi zeroLineWidth e zeroLineColor rispettivamente.

In tutti i grafici fino a questo punto, le scale non hanno avuto alcun testo descrittivo per informare gli utenti su cosa rappresentasse uno specifico asse. Questo può rendere i grafici meno utili. Ad esempio, se vedo un grafico della velocità della vettura e non riesco a capire l'unità in cui la velocità viene tracciata sull'asse y, il grafico è praticamente inutile.

È possibile mostrare o nascondere le etichette di scala in un grafico utilizzando la chiave display. Le etichette di scala sono nascoste per impostazione predefinita. Il testo che dovrebbe essere mostrato su queste scale può essere specificato usando la chiave labelString. È anche possibile controllare il colore del carattere, famiglia, dimensioni e stile utilizzando rispettivamente le chiavi fontColor, fontFamily, fontSize e fontStyle.

Ecco il grafico di velocità auto precedente con un diverso insieme di opzioni specificato.

C'è una chiave in più chiamata offsetGridLines. Quando impostata su true, sposta le etichette a metà delle linee della griglia. Questo è in genere utile durante la creazione di grafici a barre.

Configurazione di scale lineari

Le scale lineari vengono utilizzate per rappresentare 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 scale. Tuttavia, questo può comportare una certa confusione.

Diciamo che si desidera tracciare i voti degli studenti in una classe. Se il massimo dei voti per il test era 200, ma nessuno degli studenti ha totalizzato più di 180, la scala sarà molto probabilmente fino a 180. In tali casi, i lettori non avranno alcun modo di sapere se il massimo dei voti era 180 o 200.

Chart.js ha più opzioni incorporate che consentono di controllare diverse chiavi per le scale. È possibile specificare il valore minimo e valore massimo per le scale utilizzando le chiavi max e min. La dimensione di passaggio delle scale può essere controllata utilizzando la proprietà stepSize. In questo modo, è possibile determinare quante linee della griglia devono essere disegnate sul grafico. Un altro modo per impostare un limite al numero di linee della griglia e dei segni di graduazione visualizzati in un grafico è quello di utilizzare la chiave maxTicksLimit.

Ecco il codice per specificare i valori di scala minimo e massimo per la scala orizzontale sul grafico a barre per un'esercitazione precedente di questa serie.

Proprio come la scala lineare, è inoltre possibile creare scale logaritmiche per tracciare i valori nel grafico. In questo caso, l'interpolazione logaritmica viene utilizzato per determinare la posizione di un punto sugli assi. Queste scale possono essere posizionate sia sull'asse x che sull'asse y.

Configurazione delle scale lineari radiali

Questo tipo di scala è utilizzato per grafici polari e radar. A differenza della scala lineare regolare, questo si sovrappone sull'area del grafico invece di essere posizionato sull'asse.

Ci sono un sacco di chiavi specificatamente destinate a scale radiali. Ad esempio, è possibile utilizzare la chiave lineArc per specificare se le linee della griglia devono essere circolari o dritte. Il valore predefinito è false per i grafici a radar e true per i grafici polari.

È possibile controllare l'aspetto delle linee che si irradiano dal centro del grafico allue etichette dei punti dati utilizzando la chiave angleLines. Accetta un oggetto come suo valore. L'oggetto può contenere chiavi per controllare il colore e lo spessore delle linee di angolo. È possibile nascondere le righe di angolo impostando il valore della chiave display su false. Il colore e lo spessore delle linee di angolo possono essere controllati utilizzando le chiavi color e lineWidth.

L'aspetto delle etichette dei punti può essere controllato utilizzando la chiave pointLabels. Proprio come le linee di angolo, questa chiave anche accetta un oggetto come valore. Siete pregati di notare che queste opzioni hanno effetto solo quando il valore di lineArc è impostato su false. Il colore del carattere, famiglia, dimensioni e stile possono essere specificati usando  le chiavi fontColor, fontFamily, fontSize e fontStyle.

È anche possibile impostare un valore minimo e massimo per la scala utilizzando le chiavi max e min. La dimensione del passo e il numero massimo di segni di graduazione sulla scala possono essere specificati usando i tasti stepSize e maxTicksLimit. Queste opzioni sono disponibili nella chiave ticks. Alcune altre chiavi disponibili all'interno di ticks sono showLabelBackdrop, backdropColor, backdropPaddingX e backDropPaddingY. È possibile utilizzarli per mostrare o nascondere lo sfondo dietro le etichette di graduazione e controllare la loro larghezza, altezza e colore.

È inoltre possibile utilizzare la chiave gridLines che abbiamo usato 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 a radar con scale su misura.

Configurazione di scale di tempo

È possibile utilizzare una scala cronologica per la visualizzazione di date e tempi in un grafico. Come accennato nel tutorial introduttivo Chart.js, è necessario includere Moment.js nei vostri progetti per visualizzare l'orario. Una restrizione relativa all'utilizzo di una scala di tempo è che può essere visualizzata solo sull'asse x. Tutte le opzioni di configurazione per la scala di tempo si trovano sotto la sottoopzione time.

Per creare una scala di tempo, è necessario impostare il valore della chiave type di time sotto la sub-opzione xAxes. Dopo di che, è possibile impostare il valore di chiavi diverse sotto time. L'unità che deve essere utilizzato per disegnare i segni di graduazione è impostato utilizzando la chiave unit.

Il passaggio dell'unità può essere specificato utilizzando la chiave di unitStepSize. Il formato in cui devono essere visualizzate le etichette per li ticks sono specificate utilizzando la sub-opzione displayFormats. Potete leggere di più sui formati di striga ammessi sul sito Moment.js.

Il formato in cui il tempo viene visualizzato nei tooltips può essere specificato utilizzando la chiave tooltipFormat.

È anche possibile arrotondare il tempo prima del disegno del grafico utilizzando la chiave round. Prestare attenzione quando si imposta un valore per round. Diciamo che si imposta il valore su hour e ci sono due tempi che devono essere tracciati sul grafico. Se un tempo è 5:30 e un altro è 5:50, essi verranno tracciati entrambi sulla spunta 5:00. Impostare il valore su minute per tracciare sui ticks 05:30 e 05:50 rispettivamente.

Il grafico a linee tracciato all'inizio del tutorial potrebbe essere tracciato utilizzando una scala di tempo con l'aiuto del seguente codice.

Considerazioni finali

Questo tutorial ti ha aiutato a conoscere diversi tipi di scale in Chart.js. È ora possibile personalizzare facilmente le scale in un grafico controllando il loro colore, valore minimo e massimo, numero di segni di graduazione e altri fattori.

Dopo aver letto tutte le cinque esercitazioni in questa serie, si dovrebbe ora essere in grado di creare tutti i tipi di grafici disponibili in Chart.js. Spero che ti sia piaciuto il tutorial e la serie.

Se stai cercando ulteriori risorse per studiare o da utilizzare nel tuo lavoro, controlla cosa è disponibile nel marketplace Envato. Se avete domande, per favore fatemelo sapere nei commenti. Avete mai usato questa libreria nei vostri progetti? Si prega di condividere alcuni suggerimenti 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.