Úvod do radarového grafu
Radarový graf je jednoduchý způsob, jak vykreslit nízkorozměrná data v kruhovém formátu.
Radarový graf se také nazývá pavučinový graf, hvězdicový graf, síťový graf nebo polární graf.
Použití
Radarový graf je zvláště užitečný pro vývojáře, datové vědce a inženýry, kteří potřebují jasně a stručně znázornit data v kruhovém formátu.
Běžně se používá k grafickému shrnutí a porovnání výkonu více entit ve více dimenzích.
Syntaxe
Kopírovat
Vložení
radar-beta
axis A, B, C, D, E
curve c1{1,2,3,4,5}
curve c2{5,4,3,2,1}
... More Fields ...
Příklad
Kopírovat
Vložení
---
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 syntaxe
Název
title: vykresluje se v horní části radarového grafu.
Kopírovat
Vložení
radar-beta
title Title of the Radar Diagram
...
Osa
axis: syntaxe axis slouží k definici os radarového grafu.
Každá osa je reprezentována ID a volitelným popiskem.
Na jednom řádku lze definovat více os.
Kopírovat
Vložení
radar-beta
axis id1["Label1"]
axis id2["Label2"], id3["Label3"]
...
Křivka
curve: syntaxe curve slouží k definici datových bodů křivek v radarovém grafu.
Každá křivka je reprezentována ID, volitelným popiskem a seznamem hodnot.
Hodnoty lze definovat seznamem čísel nebo seznamem párů klíč-hodnota. Pokud se použijí páry klíč-hodnota, klíč představuje ID osy a hodnota představuje datový bod.
Na jednom řádku lze definovat více křivek.
Kopírovat
Vložení
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: syntaxe showLegend slouží k zobrazení nebo skrytí legendy v radarovém grafu, výchozí je zobrazená.
- max: maximální hodnota radarového grafu, používá se pro škálování radarového grafu. Pokud není zadána, maximální hodnota se vypočítá z datových bodů.
- min: minimální hodnota radarového grafu, používá se pro škálování radarového grafu. Pokud není zadána, minimální hodnota je 0.
- graticule: syntaxe graticule slouží k definici typu souřadnicových čar, které se mají vykreslit v radarovém grafu. Souřadnicové čáry mohou být circle nebo polygon. Pokud není zadáno, výchozí je circle.
- ticks: syntaxe ticks slouží k definici počtu dílků na souřadnicových čarách. Je to počet vykreslených soustředných kruhů nebo polygonů, které označují měřítko radarového grafu. Pokud není zadáno, výchozí počet dílků je 5.
Kopírovat
Vložení
radar-beta
...
showLegend true
max 100
min 0
graticule circle
ticks 5
...
Konfigurace
| Parametr | Popis | Výchozí hodnota |
|---|---|---|
| width | Šířka radarového grafu | 600 |
| height | Výška radarového grafu | 600 |
| marginTop | Horní okraj radarového grafu | 50 |
| marginBottom | Dolní okraj radarového grafu | 50 |
| marginLeft | Levý okraj radarového grafu | 50 |
| marginRight | Pravý okraj radarového grafu | 50 |
| axisScaleFactor | Faktor měřítka os | 1 |
| axisLabelFactor | Faktor pro úpravu pozice popisků os | 1.05 |
| curveTension | Napětí zaoblené křivky | 0.17 |
Proměnné tématu
Globální proměnné tématu
Výchozí hodnoty těchto proměnných závisí na použitém tématu. Chcete-li přepsat výchozí hodnoty, nastavte požadované hodnoty v části themeVariables konfigurace: config: themeVariables: cScale0: "#FF0000" cScale1: "#00FF00"
Radarový graf podporuje barevné škály cScale${i}, kde i je číslo od 0 do maximálního počtu barev v barevné škále tématu. Obvykle je maximální počet barev 12.
| Vlastnost | Popis |
|---|---|
| fontSize | Velikost písma názvu |
| titleColor | Barva názvu |
| cScale$ | Barevná škála i-té křivky |
Možnosti stylu radaru
Specifické proměnné radaru se nacházejí v klíči radar. Pro nastavení možností stylu radaru použijte následující syntaxi. config: themeVariables: radar: axisColor: "#FF0000"
| Vlastnost | Popis | Výchozí hodnota |
|---|---|---|
| axisColor | Barva čar os | black |
| axisStrokeWidth | Šířka čar os | 1 |
| axisLabelFontSize | Velikost písma popisků os | 12px |
| curveOpacity | Průhlednost křivky | 0.7 |
| curveStrokeWidth | Šířka křivky | 2 |
| graticuleColor | Barva souřadnicových čar | black |
| graticuleOpacity | Průhlednost souřadnicových čar | 0.5 |
| graticuleStrokeWidth | Šířka souřadnicových čar | 1 |
| legendBoxSize | Velikost rámečku legendy | 10 |
| legendFontSize | Velikost písma legendy | 14px |
Příklad konfigurace a tématu
Kopírovat
Vložení
---
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}
