Einführung in das Radar-Diagramm
Ein Radar-Diagramm ist eine einfache Methode, um niedrigdimensionale Daten in einem kreisförmigen Format darzustellen.
Radar-Diagramme werden auch Spinnennetz-, Stern-, Netz- oder Polarkoordinatendiagramm genannt.
Anwendung
Radar-Diagramme sind besonders nützlich für Entwickler, Datenwissenschaftler und Ingenieure, die Daten klar und prägnant in einem kreisförmigen Format darstellen müssen.
Sie werden häufig verwendet, um die Leistung mehrerer Entitäten über mehrere Dimensionen hinweg grafisch zusammenzufassen und zu vergleichen.
Syntax
Kopieren
Einbetten
radar-beta
axis A, B, C, D, E
curve c1{1,2,3,4,5}
curve c2{5,4,3,2,1}
... More Fields ...
Beispiel
Kopieren
Einbetten
---
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
Syntaxdetails
Titel
title: Wird oben im Radar-Diagramm gerendert.
Kopieren
Einbetten
radar-beta
title Title of the Radar Diagram
...
Achse
axis: Die axis-Syntax dient zur Definition der Achsen des Radar-Diagramms.
Jede Achse wird durch eine ID und ein optionales Label dargestellt.
Mehrere Achsen können in einer Zeile definiert werden.
Kopieren
Einbetten
radar-beta
axis id1["Label1"]
axis id2["Label2"], id3["Label3"]
...
Kurve
curve: Die curve-Syntax dient zur Definition der Datenpunkte der Kurven im Radar-Diagramm.
Jede Kurve wird durch eine ID, ein optionales Label und eine Werteliste dargestellt.
Werte können durch eine Zahlenliste oder eine Liste von Schlüssel-Wert-Paaren definiert werden. Wenn Schlüssel-Wert-Paare verwendet werden, repräsentiert der Schlüssel die Achsen-ID und der Wert den Datenpunkt.
Mehrere Kurven können in einer Zeile definiert werden.
Kopieren
Einbetten
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 }
...
Optionen
- showLegend: Die showLegend-Syntax dient zum Anzeigen oder Ausblenden der Legende im Radar-Diagramm; standardmäßig wird sie angezeigt.
- max: Der Maximalwert des Radar-Diagramms; dieser dient zur Skalierung des Radar-Diagramms. Wenn nicht angegeben, wird der Maximalwert aus den Datenpunkten berechnet.
- min: Der Minimalwert des Radar-Diagramms; dieser dient zur Skalierung des Radar-Diagramms. Wenn nicht angegeben, beträgt der Minimalwert 0.
- graticule: Die graticule-Syntax dient zur Definition des Typs der im Radar-Diagramm zu rendernden Gitterlinien. Gitterlinien können circle oder polygon sein. Wenn nicht angegeben, ist der Standard circle.
- ticks: Die ticks-Syntax dient zur Definition der Anzahl der Skalenstriche auf den Gitterlinien. Sie ist die Anzahl der gezeichneten konzentrischen Kreise oder Vielecke, die den Maßstab des Radar-Diagramms angeben. Wenn nicht angegeben, beträgt die Standardanzahl der Skalenstriche 5.
Kopieren
Einbetten
radar-beta
...
showLegend true
max 100
min 0
graticule circle
ticks 5
...
Konfiguration
| Parameter | Beschreibung | Standardwert |
|---|---|---|
| width | Die Breite des Radar-Diagramms | 600 |
| height | Die Höhe des Radar-Diagramms | 600 |
| marginTop | Der obere Rand des Radar-Diagramms | 50 |
| marginBottom | Der untere Rand des Radar-Diagramms | 50 |
| marginLeft | Der linke Rand des Radar-Diagramms | 50 |
| marginRight | Der rechte Rand des Radar-Diagramms | 50 |
| axisScaleFactor | Der Skalierungsfaktor der Achsen | 1 |
| axisLabelFactor | Faktor zur Anpassung der Position des Achsenlabels | 1.05 |
| curveTension | Spannung der abgerundeten Kurve | 0.17 |
Themenvariablen
Globale Themenvariablen
Die Standardwerte dieser Variablen hängen vom verwendeten Thema ab. Um die Standardwerte zu überschreiben, lege die gewünschten Werte im Abschnitt themeVariables der Konfiguration fest: config: themeVariables: cScale0: "#FF0000" cScale1: "#00FF00"
Das Radar-Diagramm unterstützt die Farbskala cScale${i}, wobei i eine Zahl von 0 bis zur maximalen Anzahl von Farben der Themenfarbskala ist. Üblicherweise beträgt die maximale Anzahl von Farben 12.
| Eigenschaft | Beschreibung |
|---|---|
| fontSize | Die Schriftgröße des Titels |
| titleColor | Titelfarbe |
| cScale$ | Die Farbskala der i-ten Kurve |
Radar-Stiloptionen
Die spezifischen Variablen des Radars befinden sich im radar-Schlüssel. Um Radar-Stiloptionen festzulegen, verwende die folgende Syntax. config: themeVariables: radar: axisColor: "#FF0000"
| Eigenschaft | Beschreibung | Standardwert |
|---|---|---|
| axisColor | Die Farbe der Achsenlinie | black |
| axisStrokeWidth | Die Breite der Achsenlinie | 1 |
| axisLabelFontSize | Die Schriftgröße des Achsenlabels | 12px |
| curveOpacity | Deckkraft der Kurve | 0.7 |
| curveStrokeWidth | Kurvenbreite | 2 |
| graticuleColor | Farbe der Gitterlinie | black |
| graticuleOpacity | Deckkraft der Gitterlinie | 0.5 |
| graticuleStrokeWidth | Breite der Gitterlinie | 1 |
| legendBoxSize | Die Größe des Legendenkästchens | 10 |
| legendFontSize | Die Schriftgröße der Legende | 14px |
Konfigurations- und Themenbeispiel
Kopieren
Einbetten
---
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}
