Inleiding tot radardiagrammen
Een radardiagram is een eenvoudige manier om laagdimensionale gegevens in een cirkelvormig formaat te tekenen.
Een radardiagram wordt ook wel spindiagram, sterrendiagram, netdiagram of polair diagram genoemd.
Toepassing
Radardiagrammen zijn bijzonder nuttig voor ontwikkelaars, datawetenschappers en ingenieurs die gegevens op een duidelijke en beknopte manier in een cirkelvormig formaat moeten weergeven.
Het wordt vaak gebruikt om de prestaties van meerdere entiteiten in meerdere dimensies grafisch samen te vatten en te vergelijken.
Syntaxis
Kopiëren
Insluiten
radar-beta
axis A, B, C, D, E
curve c1{1,2,3,4,5}
curve c2{5,4,3,2,1}
... More Fields ...
Voorbeeld
Kopiëren
Insluiten
---
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
Syntaxisdetails
Titel
title: wordt bovenaan het radardiagram gerenderd.
Kopiëren
Insluiten
radar-beta
title Title of the Radar Diagram
...
As
axis: de syntaxis axis wordt gebruikt om de assen van het radardiagram te definiëren.
Elke as wordt weergegeven door een ID en een optioneel label.
Meerdere assen kunnen op één regel worden gedefinieerd.
Kopiëren
Insluiten
radar-beta
axis id1["Label1"]
axis id2["Label2"], id3["Label3"]
...
Curve
curve: de syntaxis curve wordt gebruikt om de datapunten van curven in het radardiagram te definiëren.
Elke curve wordt weergegeven door een ID, een optioneel label en een lijst met waarden.
Waarden kunnen worden gedefinieerd door een lijst met getallen of een lijst met sleutel-waardeparen. Als sleutel-waardeparen worden gebruikt, vertegenwoordigt de sleutel de as-ID en de waarde het datapunt.
Meerdere curven kunnen op één regel worden gedefinieerd.
Kopiëren
Insluiten
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 }
...
Opties
- showLegend: de syntaxis showLegend wordt gebruikt om de legenda in het radardiagram weer te geven of te verbergen; standaard wordt deze weergegeven.
- max: de maximumwaarde van het radardiagram; dit wordt gebruikt om het radardiagram te schalen. Als deze niet is opgegeven, wordt de maximumwaarde op basis van de datapunten berekend.
- min: de minimumwaarde van het radardiagram; dit wordt gebruikt om het radardiagram te schalen. Als deze niet is opgegeven, is de minimumwaarde 0.
- graticule: de syntaxis graticule wordt gebruikt om het type rasterlijnen te definiëren dat in het radardiagram moet worden gerenderd. De rasterlijnen kunnen circle of polygon zijn. Als deze niet is opgegeven, is de standaardwaarde circle.
- ticks: de syntaxis ticks wordt gebruikt om het aantal markeringen op de rasterlijnen te definiëren. Dit is het aantal getekende concentrische cirkels of veelhoeken dat de schaal van het radardiagram aangeeft. Als deze niet is opgegeven, is het standaardaantal markeringen 5.
Kopiëren
Insluiten
radar-beta
...
showLegend true
max 100
min 0
graticule circle
ticks 5
...
Configuratie
| Parameter | Beschrijving | Standaardwaarde |
|---|---|---|
| width | De breedte van het radardiagram | 600 |
| height | De hoogte van het radardiagram | 600 |
| marginTop | De bovenmarge van het radardiagram | 50 |
| marginBottom | De ondermarge van het radardiagram | 50 |
| marginLeft | De linkermarge van het radardiagram | 50 |
| marginRight | De rechtermarge van het radardiagram | 50 |
| axisScaleFactor | De schaalfactor van de assen | 1 |
| axisLabelFactor | De factor voor het aanpassen van de positie van aslabels | 1.05 |
| curveTension | De spanning van afgeronde curven | 0.17 |
Themavariabelen
Globale themavariabelen
De standaardwaarden van deze variabelen zijn afhankelijk van het gebruikte thema. Om de standaardwaarden te overschrijven, stel je de gewenste waarden in het gedeelte themeVariables van de configuratie in: config: themeVariables: cScale0: "#FF0000" cScale1: "#00FF00"
Het radardiagram ondersteunt de kleurschaal cScale${i}, waarbij i een getal is van 0 tot het maximale aantal kleuren van de themakleurschaal. Meestal is het maximale aantal kleuren 12.
| Eigenschap | Beschrijving |
|---|---|
| fontSize | De lettergrootte van de titel |
| titleColor | De kleur van de titel |
| cScale$ | De kleurschaal van de i-de curve |
Stijlopties van de radar
De specifieke variabelen van de radar bevinden zich onder de sleutel radar. Om stijlopties voor de radar in te stellen, gebruik je de volgende syntaxis. config: themeVariables: radar: axisColor: "#FF0000"
| Eigenschap | Beschrijving | Standaardwaarde |
|---|---|---|
| axisColor | De kleur van de aslijnen | black |
| axisStrokeWidth | De breedte van de aslijnen | 1 |
| axisLabelFontSize | De lettergrootte van aslabels | 12px |
| curveOpacity | De transparantie van curven | 0.7 |
| curveStrokeWidth | De breedte van curven | 2 |
| graticuleColor | De kleur van rasterlijnen | black |
| graticuleOpacity | De transparantie van rasterlijnen | 0.5 |
| graticuleStrokeWidth | De breedte van rasterlijnen | 1 |
| legendBoxSize | De grootte van het legendavak | 10 |
| legendFontSize | De lettergrootte van de legenda | 14px |
Voorbeeld van configuratie en thema
Kopiëren
Insluiten
---
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}
