Wprowadzenie do wykresu radarowego
Wykres radarowy to prosty sposób rysowania danych niskowymiarowych w formacie kołowym.
Wykres radarowy jest również nazywany wykresem pajęczynowym, wykresem gwiaździstym, wykresem sieciowym, wykresem biegunowym.
Zastosowania
Wykresy radarowe są szczególnie przydatne dla programistów, analityków danych i inżynierów, którzy muszą przedstawiać dane w przejrzysty i zwięzły sposób w formacie kołowym.
Jest często używany do graficznego podsumowywania i porównywania wyników wielu encji w wielu wymiarach.
Składnia
Kopiuj
Osadź
radar-beta
axis A, B, C, D, E
curve c1{1,2,3,4,5}
curve c2{5,4,3,2,1}
... More Fields ...
Przykład
Kopiuj
Osadź
---
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
Szczegóły składni
Tytuł
title: renderowany na górze wykresu radarowego.
Kopiuj
Osadź
radar-beta
title Title of the Radar Diagram
...
Oś
axis: składnia axis służy do definiowania osi wykresu radarowego.
Każda oś jest reprezentowana przez ID i opcjonalną etykietę.
W jednej linii można zdefiniować wiele osi.
Kopiuj
Osadź
radar-beta
axis id1["Label1"]
axis id2["Label2"], id3["Label3"]
...
Krzywa
curve: składnia curve służy do definiowania punktów danych krzywej na wykresie radarowym.
Każda krzywa jest reprezentowana przez ID, opcjonalną etykietę i listę wartości.
Wartości można definiować za pomocą listy liczb lub listy par klucz-wartość. Jeśli użyto par klucz-wartość, klucz reprezentuje ID osi, a wartość reprezentuje punkt danych.
W jednej linii można zdefiniować wiele krzywych.
Kopiuj
Osadź
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 }
...
Opcje
- showLegend: składnia showLegend służy do pokazywania lub ukrywania legendy na wykresie radarowym; domyślnie jest pokazywana.
- max: wartość maksymalna wykresu radarowego; służy do skalowania wykresu radarowego. Jeśli nie podano, wartość maksymalna jest obliczana na podstawie punktów danych.
- min: wartość minimalna wykresu radarowego; służy do skalowania wykresu radarowego. Jeśli nie podano, wartość minimalna wynosi 0.
- graticule: składnia graticule służy do definiowania typu linii siatki do renderowania na wykresie radarowym. Linie siatki mogą być circle lub polygon. Jeśli nie podano, domyślnie circle.
- ticks: składnia ticks służy do definiowania liczby podziałek na liniach siatki. Jest to liczba rysowanych koncentrycznych okręgów lub wielokątów wskazująca skalę wykresu radarowego. Jeśli nie podano, domyślna liczba podziałek wynosi 5.
Kopiuj
Osadź
radar-beta
...
showLegend true
max 100
min 0
graticule circle
ticks 5
...
Konfiguracja
| Parametr | Opis | Wartość domyślna |
|---|---|---|
| width | Szerokość wykresu radarowego | 600 |
| height | Wysokość wykresu radarowego | 600 |
| marginTop | Górny margines wykresu radarowego | 50 |
| marginBottom | Dolny margines wykresu radarowego | 50 |
| marginLeft | Lewy margines wykresu radarowego | 50 |
| marginRight | Prawy margines wykresu radarowego | 50 |
| axisScaleFactor | Współczynnik skalowania osi | 1 |
| axisLabelFactor | Współczynnik dostosowujący pozycję etykiety osi | 1.05 |
| curveTension | Naprężenie zaokrąglonej krzywej | 0.17 |
Zmienne motywu
Globalne zmienne motywu
Domyślne wartości tych zmiennych zależą od użytego motywu. Aby nadpisać wartości domyślne, ustaw żądane wartości w sekcji themeVariables konfiguracji: config: themeVariables: cScale0: "#FF0000" cScale1: "#00FF00"
Wykres radarowy obsługuje skalę kolorów cScale${i}, gdzie i to liczba od 0 do maksymalnej liczby kolorów w skali kolorów motywu. Zwykle maksymalna liczba kolorów wynosi 12.
| Właściwość | Opis |
|---|---|
| fontSize | Rozmiar czcionki tytułu |
| titleColor | Kolor tytułu |
| cScale$ | Skala kolorów i-tej krzywej |
Opcje stylu radaru
Zmienne specyficzne dla radaru znajdują się w kluczu radar. Aby ustawić opcje stylu radaru, użyj następującej składni. config: themeVariables: radar: axisColor: "#FF0000"
| Właściwość | Opis | Wartość domyślna |
|---|---|---|
| axisColor | Kolor linii osi | black |
| axisStrokeWidth | Szerokość linii osi | 1 |
| axisLabelFontSize | Rozmiar czcionki etykiety osi | 12px |
| curveOpacity | Krycie krzywej | 0.7 |
| curveStrokeWidth | Szerokość krzywej | 2 |
| graticuleColor | Kolor linii siatki | black |
| graticuleOpacity | Krycie linii siatki | 0.5 |
| graticuleStrokeWidth | Szerokość linii siatki | 1 |
| legendBoxSize | Rozmiar ramki legendy | 10 |
| legendFontSize | Rozmiar czcionki legendy | 14px |
Przykład konfiguracji i motywu
Kopiuj
Osadź
---
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}
