Introduktion til radar-diagrammer
Et radar-diagram er en enkel måde at plotte lavdimensionelle data i et cirkulært format.
Radar-diagrammer kaldes også edderkoppediagrammer, stjernediagrammer, netdiagrammer og polære diagrammer.
Anvendelse
Radar-diagrammer er særligt nyttige for udviklere, dataforskere og ingeniører, der har brug for klart og kortfattet at repræsentere data i et cirkulært format.
De bruges typisk til grafisk at opsummere og sammenligne flere entiteters præstationer på tværs af flere dimensioner.
Syntaks
Kopiér
Integrer
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
Kopiér
Integrer
---
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
Titel
title: rendres øverst i radar-diagrammet.
Kopiér
Integrer
radar-beta
title Title of the Radar Diagram
...
Akser
axis: axis-syntaksen bruges til at definere akserne i et radar-diagram.
Hver akse repræsenteres af et ID og en valgfri etiket.
Du kan definere flere akser på én linje.
Kopiér
Integrer
radar-beta
axis id1["Label1"]
axis id2["Label2"], id3["Label3"]
...
Kurve
curve: curve-syntaksen bruges til at definere kurvens datapunkter i et radar-diagram.
Hver kurve repræsenteres af et ID, en valgfri etiket og en liste af værdier.
Værdier kan defineres med en liste af tal eller en liste af nøgle-værdi-par. Hvis der bruges nøgle-værdi-par, repræsenterer nøglen akse-ID'et, og værdien repræsenterer datapunktet.
Du kan definere flere kurver på én linje.
Kopiér
Integrer
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 }
...
Indstillinger
- showLegend: showLegend-syntaksen bruges til at vise eller skjule forklaringen i radar-diagrammet; den vises som standard.
- max: radar-diagrammets maksimumværdi, som bruges til at skalere radar-diagrammet. Hvis den ikke er angivet, beregnes maksimumværdien ud fra datapunkterne.
- min: radar-diagrammets minimumværdi, som bruges til at skalere radar-diagrammet. Hvis den ikke er angivet, er minimumsværdien 0.
- graticule: graticule-syntaksen bruges til at angive, hvilken type gitterlinjer der skal rendres i radar-diagrammet. Gitterlinjerne kan være circle eller polygon. Hvis den ikke er angivet, er standarden circle.
- ticks: ticks-syntaksen bruges til at angive antallet af markeringer på gitterlinjerne. Det er antallet af tegnede koncentriske cirkler eller polygoner, som angiver radar-diagrammets skala. Hvis den ikke er angivet, er standardantallet af markeringer 5.
Kopiér
Integrer
radar-beta
...
showLegend true
max 100
min 0
graticule circle
ticks 5
...
Konfiguration
| Parameter | Beskrivelse | Standardværdi |
|---|---|---|
| width | Radar-diagrammets bredde | 600 |
| height | Radar-diagrammets højde | 600 |
| marginTop | Radar-diagrammets øverste margen | 50 |
| marginBottom | Radar-diagrammets nederste margen | 50 |
| marginLeft | Radar-diagrammets venstre margen | 50 |
| marginRight | Radar-diagrammets højre margen | 50 |
| axisScaleFactor | Aksernes skaleringsfaktor | 1 |
| axisLabelFactor | Faktor til justering af akseetiketternes placering | 1.05 |
| curveTension | Spænding for afrundede kurver | 0.17 |
Temavariable
Globale temavariable
Standardværdierne for disse variabler afhænger af det anvendte tema. For at tilsidesætte standardværdierne skal du angive de ønskede værdier i themeVariables-delen af konfigurationen: config: themeVariables: cScale0: "#FF0000" cScale1: "#00FF00"
Radar-diagrammer understøtter farveskalaen cScale${i}, hvor i er et tal fra 0 til det maksimale antal farver i temaets farveskala. Normalt er det maksimale antal farver 12.
| Egenskab | Beskrivelse |
|---|---|
| fontSize | Titelens skriftstørrelse |
| titleColor | Titelens farve |
| cScale$ | Farveskalaen for den i-te kurve |
Indstillinger for radar-stil
Radar-specifikke variabler findes i radar-nøglen. Brug følgende syntaks til at angive radar-stilindstillinger. config: themeVariables: radar: axisColor: "#FF0000"
| Egenskab | Beskrivelse | Standardværdi |
|---|---|---|
| axisColor | Akseliniens farve | black |
| axisStrokeWidth | Akseliniens bredde | 1 |
| axisLabelFontSize | Skriftstørrelse for akseetiketter | 12px |
| curveOpacity | Kurvens gennemsigtighed | 0.7 |
| curveStrokeWidth | Kurvens bredde | 2 |
| graticuleColor | Gitterlinjernes farve | black |
| graticuleOpacity | Gitterlinjernes gennemsigtighed | 0.5 |
| graticuleStrokeWidth | Gitterlinjernes bredde | 1 |
| legendBoxSize | Størrelsen på forklaringsboksen | 10 |
| legendFontSize | Forklaringens skriftstørrelse | 14px |
Eksempel på konfiguration og tema
Kopiér
Integrer
---
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}
