Introduktion till radardiagram
Ett radardiagram är ett enkelt sätt att rita lågdimensionell data i ett cirkulärt format.
Ett radardiagram kallas också spindeldiagram, stjärndiagram, nätverksdiagram, polärt diagram.
Användning
Radardiagram är särskilt användbara för utvecklare, dataforskare och ingenjörer som behöver representera data på ett tydligt och koncist sätt i ett cirkulärt format.
Det används ofta för att grafiskt sammanfatta och jämföra flera entiteters prestanda i flera dimensioner.
Syntax
Kopiera
Bädda in
radar-beta
axis A, B, C, D, E
curve c1{1,2,3,4,5}
curve c2{5,4,3,2,1}
... More Fields ...
Exempel
Kopiera
Bädda in
---
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
Syntaxdetaljer
Titel
title: renderas högst upp i radardiagrammet.
Kopiera
Bädda in
radar-beta
title Title of the Radar Diagram
...
Axel
axis: axis -syntaxen används för att definiera radardiagrammets axlar.
Varje axel representeras av ett ID och en valfri etikett.
Du kan definiera flera axlar på en och samma rad.
Kopiera
Bädda in
radar-beta
axis id1["Label1"]
axis id2["Label2"], id3["Label3"]
...
Kurva
curve: curve -syntaxen används för att definiera datapunkterna för kurvor i radardiagrammet.
Varje kurva representeras av ett ID, en valfri etikett och en lista med värden.
Värden kan definieras med en lista med nummer eller en lista med nyckel-värde-par. Om nyckel-värde-par används representerar nyckeln axelns ID och värdet datapunkten.
Du kan definiera flera kurvor på en och samma rad.
Kopiera
Bädda in
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 }
...
Alternativ
- showLegend: showLegend -syntaxen används för att visa eller dölja teckenförklaringen i radardiagrammet, visas som standard.
- max: radardiagrammets maxvärde, detta används för att skala radardiagrammet. Om det inte anges beräknas maxvärdet från datapunkterna.
- min: radardiagrammets minvärde, detta används för att skala radardiagrammet. Om det inte anges är minvärdet 0.
- graticule: graticule -syntaxen används för att definiera vilken typ av latitud- och longitudlinjer som ska renderas i radardiagrammet. Latitud- och longitudlinjerna kan vara circle eller polygon. Om det inte anges är standardvärdet circle.
- ticks: ticks -syntaxen används för att definiera antalet markeringar på latitud- och longitudlinjerna. Det är antalet koncentriska cirklar eller polygoner som ritas för att ange radardiagrammets skala. Om det inte anges är standardantalet markeringar 5.
Kopiera
Bädda in
radar-beta
...
showLegend true
max 100
min 0
graticule circle
ticks 5
...
Konfiguration
| Parameter | Beskrivning | Standardvärde |
|---|---|---|
| width | Radardiagrammets bredd | 600 |
| height | Radardiagrammets höjd | 600 |
| marginTop | Radardiagrammets övermarginal | 50 |
| marginBottom | Radardiagrammets nedermarginal | 50 |
| marginLeft | Radardiagrammets vänstermarginal | 50 |
| marginRight | Radardiagrammets högermarginal | 50 |
| axisScaleFactor | Axelns skalningsfaktor | 1 |
| axisLabelFactor | Faktor för att justera axeletiketternas position | 1.05 |
| curveTension | Spänning för rundade kurvor | 0.17 |
Temavariabler
Globala temavariabler
Standardvärdena för dessa variabler beror på temat som används. För att åsidosätta standardvärdena, ange önskade värden i avsnittet themeVariables i konfigurationen: config: themeVariables: cScale0: "#FF0000" cScale1: "#00FF00"
Radardiagrammet stöder färgskalan cScale${i} , där i är ett tal från 0 till det maximala antalet färger i temats färgskala. Vanligtvis är det maximala antalet färger 12.
| Egenskap | Beskrivning |
|---|---|
| fontSize | Titelns teckenstorlek |
| titleColor | Titelns färg |
| cScale$ | Färgskalan för den i:te kurvan |
Alternativ för radarstil
Radarns specifika variabler finns i nyckeln radar . För att ställa in radarns stilalternativ, använd följande syntax. config: themeVariables: radar: axisColor: "#FF0000"
| Egenskap | Beskrivning | Standardvärde |
|---|---|---|
| axisColor | Färgen på axellinjen | black |
| axisStrokeWidth | Bredden på axellinjen | 1 |
| axisLabelFontSize | Teckenstorleken för axeletiketter | 12px |
| curveOpacity | Kurvans opacitet | 0.7 |
| curveStrokeWidth | Kurvans bredd | 2 |
| graticuleColor | Färgen på latitud- och longitudlinjer | black |
| graticuleOpacity | Opaciteten för latitud- och longitudlinjer | 0.5 |
| graticuleStrokeWidth | Bredden på latitud- och longitudlinjer | 1 |
| legendBoxSize | Storleken på teckenförklaringens ruta | 10 |
| legendFontSize | Teckenstorleken för teckenförklaringen | 14px |
Exempel på konfiguration och tema
Kopiera
Bädda in
---
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}
