Uvod v radar diagram
Radar diagram je preprost način za risanje nizko-dimenzionalnih podatkov v krožni obliki.
Radar diagram se imenuje tudi pajkov diagram, zvezdni diagram, mrežni diagram, polarni diagram.
Uporaba
Radar diagram je še posebej uporaben za razvijalce, podatkovne znanstvenike in inženirje, ki morajo podatke predstaviti jasno in jedrnato v krožni obliki.
Pogosto se uporablja za grafično povzemanje in primerjavo uspešnosti več entitet v več dimenzijah.
Sintaksa
Kopiraj
Vdelava
radar-beta
axis A, B, C, D, E
curve c1{1,2,3,4,5}
curve c2{5,4,3,2,1}
... More Fields ...
Primer
Kopiraj
Vdelava
---
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
Podrobnosti sintakse
Naslov
title: upodobi se na vrhu radar diagrama.
Kopiraj
Vdelava
radar-beta
title Title of the Radar Diagram
...
Os
axis: sintaksa axis se uporablja za definiranje osi radar diagrama.
Vsaka os je predstavljena z ID in neobvezno oznako.
V eni vrstici lahko definirate več osi.
Kopiraj
Vdelava
radar-beta
axis id1["Label1"]
axis id2["Label2"], id3["Label3"]
...
Krivulja
curve: sintaksa curve se uporablja za definiranje podatkovnih točk krivulje v radar diagramu.
Vsaka krivulja je predstavljena z ID, neobvezno oznako in seznamom vrednosti.
Vrednosti so lahko definirane s seznamom števil ali seznamom parov ključ-vrednost. Če uporabite pare ključ-vrednost, ključ predstavlja ID osi, vrednost pa podatkovno točko.
V eni vrstici lahko definirate več krivulj.
Kopiraj
Vdelava
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 }
...
Možnosti
- showLegend: sintaksa showLegend se uporablja za prikaz ali skritje legende v radar diagramu; privzeto je prikazana.
- max: največja vrednost radar diagrama, ki se uporablja za skaliranje radar diagrama. Če ni podana, se največja vrednost izračuna iz podatkovnih točk.
- min: najmanjša vrednost radar diagrama, ki se uporablja za skaliranje radar diagrama. Če ni podana, je najmanjša vrednost 0.
- graticule: sintaksa graticule se uporablja za definiranje vrste koordinatnih črt, ki naj se upodobijo v radar diagramu. Koordinatne črte so lahko circle ali polygon. Če niso podane, je privzeto circle.
- ticks: sintaksa ticks se uporablja za določitev števila oznak na koordinatnih črtah. To je število narisanih koncentričnih krogov ali poligonov, ki označujejo merilo radar diagrama. Če ni podano, je privzeto število oznak 5.
Kopiraj
Vdelava
radar-beta
...
showLegend true
max 100
min 0
graticule circle
ticks 5
...
Konfiguracija
| Parameter | Opis | Privzeta vrednost |
|---|---|---|
| width | Širina radar diagrama | 600 |
| height | Višina radar diagrama | 600 |
| marginTop | Zgornji rob radar diagrama | 50 |
| marginBottom | Spodnji rob radar diagrama | 50 |
| marginLeft | Levi rob radar diagrama | 50 |
| marginRight | Desni rob radar diagrama | 50 |
| axisScaleFactor | Faktor skaliranja osi | 1 |
| axisLabelFactor | Faktor za prilagoditev položaja oznak osi | 1.05 |
| curveTension | Napetost zaobljene krivulje | 0.17 |
Spremenljivke teme
Globalne spremenljivke teme
Privzete vrednosti teh spremenljivk so odvisne od uporabljene teme. Za preglasitev privzetih vrednosti nastavite želene vrednosti v razdelku themeVariables konfiguracije: config: themeVariables: cScale0: "#FF0000" cScale1: "#00FF00"
Radar diagram podpira barvno lestvico cScale${i}, pri čemer je i število od 0 do največjega števila barv v barvni lestvici teme. Običajno je največje število barv 12.
| Lastnost | Opis |
|---|---|
| fontSize | Velikost pisave naslova |
| titleColor | Barva naslova |
| cScale$ | Barvna lestvica i-te krivulje |
Možnosti sloga radarja
Posebne spremenljivke radarja se nahajajo znotraj ključa radar. Za nastavitev možnosti sloga radarja uporabite naslednjo sintakso. config: themeVariables: radar: axisColor: "#FF0000"
| Lastnost | Opis | Privzeta vrednost |
|---|---|---|
| axisColor | Barva črte osi | black |
| axisStrokeWidth | Širina črte osi | 1 |
| axisLabelFontSize | Velikost pisave oznak osi | 12px |
| curveOpacity | Prosojnost krivulje | 0.7 |
| curveStrokeWidth | Širina krivulje | 2 |
| graticuleColor | Barva koordinatnih črt | black |
| graticuleOpacity | Prosojnost koordinatnih črt | 0.5 |
| graticuleStrokeWidth | Širina koordinatnih črt | 1 |
| legendBoxSize | Velikost polja legende | 10 |
| legendFontSize | Velikost pisave legende | 14px |
Primer konfiguracije in teme
Kopiraj
Vdelava
---
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}
