Introduksjon til radardiagram
Radardiagrammet er en enkel måte å plotte lavdimensjonale data i et sirkulært format på.
Radardiagrammet kalles også spindeldiagram, stjernediagram, nettdiagram og polardiagram.
Anvendelse
Radardiagrammer er spesielt nyttige for utviklere, dataforskere og ingeniører som trenger å representere data på en klar og konsis måte i et sirkulært format.
Det brukes ofte til grafisk å oppsummere og sammenligne ytelsen til flere entiteter langs flere dimensjoner.
Syntaks
Kopier
Bygg inn
radar-beta
axis A, B, C, D, E
curve c1{1,2,3,4,5}
curve c2{5,4,3,2,1}
... More Fields ...
Eksempel
Kopier
Bygg inn
---
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
Syntaksdetaljer
Tittel
title: rendres øverst i radardiagrammet.
Kopier
Bygg inn
radar-beta
title Title of the Radar Diagram
...
Akse
axis: axis -syntaksen brukes til å definere aksene i radardiagrammet.
Hver akse representeres av en ID og en valgfri etikett.
Du kan definere flere akser på én linje.
Kopier
Bygg inn
radar-beta
axis id1["Label1"]
axis id2["Label2"], id3["Label3"]
...
Kurve
curve: curve -syntaksen brukes til å definere datapunktene for kurvene i radardiagrammet.
Hver kurve representeres av en ID, en valgfri etikett og en verdiliste.
Verdier kan defineres med en talliste eller en liste over nøkkel-verdi-par. Hvis nøkkel-verdi-par brukes, representerer nøkkelen akse-ID-en og verdien datapunktet.
Du kan definere flere kurver på én linje.
Kopier
Bygg inn
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 }
...
Alternativer
- showLegend: showLegend -syntaksen brukes til å vise eller skjule tegnforklaringen i radardiagrammet, og vises som standard.
- max: radardiagrammets maksimumsverdi, som brukes til å skalere radardiagrammet. Hvis den ikke er angitt, beregnes maksimumsverdien fra datapunktene.
- min: radardiagrammets minimumsverdi, som brukes til å skalere radardiagrammet. Hvis den ikke er angitt, er minimumsverdien 0.
- graticule: graticule -syntaksen brukes til å definere typen bredde- og lengdelinjer som skal rendres i radardiagrammet. Bredde- og lengdelinjene kan være circle eller polygon . Hvis det ikke er angitt, er standarden circle .
- ticks: ticks -syntaksen brukes til å definere antall merker på bredde- og lengdelinjene. Det er antallet konsentriske sirkler eller polygoner som tegnes, og brukes til å indikere radardiagrammets skala. Hvis det ikke er angitt, er standard antall merker 5.
Kopier
Bygg inn
radar-beta
...
showLegend true
max 100
min 0
graticule circle
ticks 5
...
Konfigurasjon
| Parameter | Beskrivelse | Standardverdi |
|---|---|---|
| width | Bredden på radardiagrammet | 600 |
| height | Høyden på radardiagrammet | 600 |
| marginTop | Øvre marg for radardiagrammet | 50 |
| marginBottom | Nedre marg for radardiagrammet | 50 |
| marginLeft | Venstre marg for radardiagrammet | 50 |
| marginRight | Høyre marg for radardiagrammet | 50 |
| axisScaleFactor | Skaleringsfaktoren for aksene | 1 |
| axisLabelFactor | Faktoren for å justere posisjonen til akseetiketten | 1.05 |
| curveTension | Spenningen i den avrundede kurven | 0.17 |
Temavariabel
Global temavariabel
Standardverdiene for disse variablene avhenger av temaet som brukes. For å overstyre standardverdiene angir du ønskede verdier i delen themeVariables i konfigurasjonen: config: themeVariables: cScale0: "#FF0000" cScale1: "#00FF00"
Radardiagrammet støtter fargeskalaen cScale${i} , der i er et tall fra 0 til det maksimale antallet farger i temafargeskalaen. Vanligvis er det maksimale antallet farger 12.
| Egenskap | Beskrivelse |
|---|---|
| fontSize | Skriftstørrelsen på tittelen |
| titleColor | Tittelfarge |
| cScale$ | Fargeskalaen for den i-te kurven |
Alternativer for radarstil
Radarens spesifikke variabler ligger i radar -nøkkelen. For å angi stilalternativer for radaren bruker du følgende syntaks. config: themeVariables: radar: axisColor: "#FF0000"
| Egenskap | Beskrivelse | Standardverdi |
|---|---|---|
| axisColor | Fargen på akselinjen | black |
| axisStrokeWidth | Bredden på akselinjen | 1 |
| axisLabelFontSize | Skriftstørrelsen på akseetiketten | 12px |
| curveOpacity | Kurvens opasitet | 0.7 |
| curveStrokeWidth | Kurvebredde | 2 |
| graticuleColor | Fargen på bredde- og lengdelinjene | black |
| graticuleOpacity | Opasiteten til bredde- og lengdelinjene | 0.5 |
| graticuleStrokeWidth | Bredden på bredde- og lengdelinjene | 1 |
| legendBoxSize | Størrelsen på forklaringsboksen | 10 |
| legendFontSize | Skriftstørrelsen i tegnforklaringen | 14px |
Eksempel på konfigurasjon og tema
Kopier
Bygg inn
---
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}
