Introduzione al grafico radar
Il grafico radar è un modo semplice per tracciare dati a bassa dimensionalità in formato circolare.
Il grafico radar è anche chiamato grafico a ragno, grafico a stella, grafico a rete, grafico polare.
Applicazione
Il grafico radar è particolarmente utile per sviluppatori, data scientist e ingegneri che devono rappresentare dati in modo chiaro e conciso in formato circolare.
È comunemente usato per riassumere e confrontare graficamente le prestazioni di più entità su più dimensioni.
Sintassi
Copia
Incorpora
radar-beta
axis A, B, C, D, E
curve c1{1,2,3,4,5}
curve c2{5,4,3,2,1}
... More Fields ...
Esempio
Copia
Incorpora
---
title: "Grades"
---
radar-beta
axis m["Math"], s["Chinese"], e["English"]
axis h["History"], g["Geography"], a["Art"]
curve a["Alice"]{85, 90, 80, 70, 75, 90}
curve b["Bob"]{70, 75, 85, 80, 90, 85}
max 100
min 0
Dettagli della sintassi
Titolo
title: renderizzato nella parte superiore del grafico radar.
Copia
Incorpora
radar-beta
title Title of the Radar Diagram
...
Asse
axis: la sintassi axis serve a definire gli assi del grafico radar.
Ogni asse è rappresentato da un ID e da un'etichetta opzionale.
È possibile definire più assi su una stessa riga.
Copia
Incorpora
radar-beta
axis id1["Label1"]
axis id2["Label2"], id3["Label3"]
...
Curva
curve: la sintassi curve serve a definire i punti dati delle curve nel grafico radar.
Ogni curva è rappresentata da un ID, un'etichetta opzionale e un elenco di valori.
I valori possono essere definiti tramite un elenco di numeri o un elenco di coppie chiave-valore. Se si usano coppie chiave-valore, la chiave rappresenta l'ID dell'asse e il valore rappresenta il punto dati.
È possibile definire più curve su una stessa riga.
Copia
Incorpora
radar-beta
axis axis1, axis2, axis3
curve id1["Label1"]{1, 2, 3}
curve id2["Label2"]{4, 5, 6}, id3{7, 8, 9}
curve id4{ axis3: 30, axis1: 20, axis2: 10 }
...
Opzioni
- showLegend: la sintassi showLegend serve a mostrare o nascondere la legenda nel grafico radar; l'impostazione predefinita è mostrata.
- max: il valore massimo del grafico radar, usato per scalare il grafico radar. Se non viene fornito, il valore massimo viene calcolato dai punti dati.
- min: il valore minimo del grafico radar, usato per scalare il grafico radar. Se non viene fornito, il valore minimo è 0.
- graticule: la sintassi graticule serve a definire il tipo di linee reticolari da renderizzare nel grafico radar. Le linee reticolari possono essere circle o polygon. Se non viene fornito, il valore predefinito è circle.
- ticks: la sintassi ticks serve a definire il numero di tacche sulle linee reticolari. È il numero di cerchi o poligoni concentrici disegnati, usato per indicare la scala del grafico radar. Se non viene fornito, il numero predefinito di tacche è 5.
Copia
Incorpora
radar-beta
...
showLegend true
max 100
min 0
graticule circle
ticks 5
...
Configurazione
| Parametro | Descrizione | Valore predefinito |
|---|---|---|
| width | Larghezza del grafico radar | 600 |
| height | Altezza del grafico radar | 600 |
| marginTop | Margine superiore del grafico radar | 50 |
| marginBottom | Margine inferiore del grafico radar | 50 |
| marginLeft | Margine sinistro del grafico radar | 50 |
| marginRight | Margine destro del grafico radar | 50 |
| axisScaleFactor | Fattore di scala dell'asse | 1 |
| axisLabelFactor | Fattore che regola la posizione dell'etichetta dell'asse | 1.05 |
| curveTension | Tensione della curva arrotondata | 0.17 |
Variabile del tema
Variabile del tema globale
I valori predefiniti di queste variabili dipendono dal tema utilizzato. Per sovrascrivere i valori predefiniti, imposta i valori desiderati nella sezione themeVariables della configurazione: config: themeVariables: cScale0: "#FF0000" cScale1: "#00FF00"
Il grafico radar supporta la scala di colori cScale${i}, dove i è un numero da 0 al numero massimo di colori della scala di colori del tema. Di solito, il numero massimo di colori è 12.
| Proprietà | Descrizione |
|---|---|
| fontSize | Dimensione del carattere del titolo |
| titleColor | Colore del titolo |
| cScale$ | Scala di colori della i-esima curva |
Opzioni di stile del grafico radar
Le variabili specifiche del grafico radar si trovano nella chiave radar. Per impostare le opzioni di stile del grafico radar, usa la seguente sintassi. config: themeVariables: radar: axisColor: "#FF0000"
| Proprietà | Descrizione | Valore predefinito |
|---|---|---|
| axisColor | Colore della linea dell'asse | black |
| axisStrokeWidth | Spessore della linea dell'asse | 1 |
| axisLabelFontSize | Dimensione del carattere dell'etichetta dell'asse | 12px |
| curveOpacity | Opacità della curva | 0.7 |
| curveStrokeWidth | Spessore della curva | 2 |
| graticuleColor | Colore delle linee reticolari | black |
| graticuleOpacity | Opacità delle linee reticolari | 0.5 |
| graticuleStrokeWidth | Spessore delle linee reticolari | 1 |
| legendBoxSize | Dimensione del riquadro della legenda | 10 |
| legendFontSize | Dimensione del carattere della legenda | 14px |
Esempio di configurazione e tema
Copia
Incorpora
---
config:
radar:
axisScaleFactor: 0.25
curveTension: 0.1
theme: base
themeVariables:
cScale0: "#FF0000"
cScale1: "#00FF00"
cScale2: "#0000FF"
radar:
curveOpacity: 0
---
radar-beta
axis A, B, C, D, E
curve c1{1,2,3,4,5}
curve c2{5,4,3,2,1}
curve c3{3,3,3,3,3}
