Panimula sa radar chart
Ang radar chart ay isang simpleng paraan upang iguhit ang low-dimensional data sa circular na format.
Ang radar chart ay kilala rin bilang spider chart, star chart, web chart, polar chart.
Application
Ang radar chart ay partikular na kapaki-pakinabang para sa mga developer, data scientist, at engineer na kailangang kumatawan ng data sa circular na format nang malinaw at maikli.
Kadalasan itong ginagamit upang graphical na ibuod at ihambing ang performance ng maraming entity sa maraming dimensyon.
Syntax
Kopyahin
Embed
radar-beta
axis A, B, C, D, E
curve c1{1,2,3,4,5}
curve c2{5,4,3,2,1}
... More Fields ...
Halimbawa
Kopyahin
Embed
---
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
Detalye ng syntax
Pamagat
title: ire-render sa tuktok ng radar chart.
Kopyahin
Embed
radar-beta
title Title of the Radar Diagram
...
Axis
axis: ang axis syntax ay ginagamit upang tukuyin ang axis ng radar chart.
Ang bawat axis ay kinakatawan ng isang ID at isang opsyonal na label.
Maaaring tukuyin ang maraming axis sa isang linya.
Kopyahin
Embed
radar-beta
axis id1["Label1"]
axis id2["Label2"], id3["Label3"]
...
Curve
curve: ang curve syntax ay ginagamit upang tukuyin ang data point ng curve sa radar chart.
Ang bawat curve ay kinakatawan ng isang ID, isang opsyonal na label, at isang listahan ng value.
Ang value ay maaaring tukuyin sa pamamagitan ng listahan ng numero o listahan ng key-value pair. Kung gagamit ng key-value pair, ang key ay kumakatawan sa axis ID, at ang value ay kumakatawan sa data point.
Maaaring tukuyin ang maraming curve sa isang linya.
Kopyahin
Embed
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 }
...
Option
- showLegend: ang showLegend syntax ay ginagamit upang ipakita o itago ang legend sa radar chart, default ay ipinapakita.
- max: ang maximum na halaga ng radar chart, ginagamit ito upang i-scale ang radar chart. Kung hindi ibinigay, ang maximum ay kinakalkula mula sa data point.
- min: ang minimum na halaga ng radar chart, ginagamit ito upang i-scale ang radar chart. Kung hindi ibinigay, ang minimum ay 0.
- graticule: ang graticule syntax ay ginagamit upang tukuyin ang uri ng graticule na ire-render sa radar chart. Ang graticule ay maaaring circle o polygon. Kung hindi ibinigay, ang default ay circle.
- ticks: ang ticks syntax ay ginagamit upang tukuyin ang bilang ng tick sa graticule. Ito ang bilang ng concentric circle o polygon na iginuguhit, na ginagamit upang ipahiwatig ang scale ng radar chart. Kung hindi ibinigay, ang default na bilang ng tick ay 5.
Kopyahin
Embed
radar-beta
...
showLegend true
max 100
min 0
graticule circle
ticks 5
...
Configuration
| Parameter | Paglalarawan | Default value |
|---|---|---|
| width | Lapad ng radar chart | 600 |
| height | Taas ng radar chart | 600 |
| marginTop | Top margin ng radar chart | 50 |
| marginBottom | Bottom margin ng radar chart | 50 |
| marginLeft | Left margin ng radar chart | 50 |
| marginRight | Right margin ng radar chart | 50 |
| axisScaleFactor | Scale factor ng coordinate axis | 1 |
| axisLabelFactor | Factor na nag-aayos ng posisyon ng label ng coordinate axis | 1.05 |
| curveTension | Tension ng rounded curve | 0.17 |
Tema variable
Global na tema variable
Ang default na halaga ng mga variable na ito ay depende sa temang ginagamit. Upang i-override ang default, itakda ang gustong halaga sa themeVariables section ng configuration: config: themeVariables: cScale0: "#FF0000" cScale1: "#00FF00"
Sinusuportahan ng radar chart ang color scale na cScale${i}, kung saan ang i ay numero mula 0 hanggang sa maximum na bilang ng kulay ng color scale ng tema. Karaniwan, ang maximum na bilang ng kulay ay 12.
| Property | Paglalarawan |
|---|---|
| fontSize | Font size ng pamagat |
| titleColor | Kulay ng pamagat |
| cScale$ | Color scale ng ika-i na curve |
Style option ng radar
Ang partikular na variable ng radar ay matatagpuan sa loob ng radar key. Upang itakda ang style option ng radar, gamitin ang sumusunod na syntax. config: themeVariables: radar: axisColor: "#FF0000"
| Property | Paglalarawan | Default value |
|---|---|---|
| axisColor | Kulay ng linya ng coordinate axis | black |
| axisStrokeWidth | Lapad ng linya ng coordinate axis | 1 |
| axisLabelFontSize | Font size ng label ng coordinate axis | 12px |
| curveOpacity | Opacity ng curve | 0.7 |
| curveStrokeWidth | Lapad ng curve | 2 |
| graticuleColor | Kulay ng graticule | black |
| graticuleOpacity | Opacity ng graticule | 0.5 |
| graticuleStrokeWidth | Lapad ng graticule | 1 |
| legendBoxSize | Laki ng legend box | 10 |
| legendFontSize | Font size ng legend | 14px |
Halimbawa ng configuration at tema
Kopyahin
Embed
---
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}
