Pengenalan diagram radar
Diagram radar adalah cara sederhana untuk memplot data berdimensi rendah dalam format melingkar.
Diagram radar juga dikenal sebagai diagram laba-laba, diagram bintang, diagram jaring, diagram koordinat polar.
Aplikasi
Diagram radar sangat berguna bagi pengembang, ilmuwan data, dan insinyur yang perlu merepresentasikan data dengan jelas dan ringkas dalam format melingkar.
Diagram ini biasanya digunakan untuk merangkum dan membandingkan secara grafis kinerja beberapa entitas di berbagai dimensi.
Sintaks
Salin
Sematkan
radar-beta
axis A, B, C, D, E
curve c1{1,2,3,4,5}
curve c2{5,4,3,2,1}
... More Fields ...
Contoh
Salin
Sematkan
---
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
Detail sintaks
Judul
title: dirender di bagian atas diagram radar.
Salin
Sematkan
radar-beta
title Title of the Radar Diagram
...
Sumbu
axis: sintaks axis digunakan untuk mendefinisikan sumbu diagram radar.
Setiap sumbu direpresentasikan oleh sebuah ID dan label opsional.
Beberapa sumbu dapat didefinisikan pada satu baris.
Salin
Sematkan
radar-beta
axis id1["Label1"]
axis id2["Label2"], id3["Label3"]
...
Kurva
curve: sintaks curve digunakan untuk mendefinisikan titik data kurva dalam diagram radar.
Setiap kurva direpresentasikan oleh sebuah ID, label opsional, dan daftar nilai.
Nilai dapat didefinisikan melalui daftar angka atau daftar pasangan kunci-nilai. Jika menggunakan pasangan kunci-nilai, kuncinya merepresentasikan ID sumbu, dan nilainya merepresentasikan titik data.
Beberapa kurva dapat didefinisikan pada satu baris.
Salin
Sematkan
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 }
...
Opsi
- showLegend: sintaks showLegend digunakan untuk menampilkan atau menyembunyikan legenda dalam diagram radar, bawaannya ditampilkan.
- max: nilai maksimum diagram radar, ini digunakan untuk menskalakan diagram radar. Jika tidak diberikan, nilai maksimum dihitung dari titik data.
- min: nilai minimum diagram radar, ini digunakan untuk menskalakan diagram radar. Jika tidak diberikan, nilai minimumnya adalah 0.
- graticule: sintaks graticule digunakan untuk mendefinisikan jenis garis bujur-lintang yang akan dirender dalam diagram radar. Garis bujur-lintang dapat berupa circle atau polygon. Jika tidak diberikan, bawaannya circle.
- ticks: sintaks ticks digunakan untuk mendefinisikan jumlah skala pada garis bujur-lintang. Ini adalah jumlah lingkaran konsentris atau poligon yang digambar, digunakan untuk menunjukkan skala diagram radar. Jika tidak diberikan, jumlah skala bawaannya adalah 5.
Salin
Sematkan
radar-beta
...
showLegend true
max 100
min 0
graticule circle
ticks 5
...
Konfigurasi
| Parameter | Deskripsi | Nilai bawaan |
|---|---|---|
| width | Lebar diagram radar | 600 |
| height | Tinggi diagram radar | 600 |
| marginTop | Margin atas diagram radar | 50 |
| marginBottom | Margin bawah diagram radar | 50 |
| marginLeft | Margin kiri diagram radar | 50 |
| marginRight | Margin kanan diagram radar | 50 |
| axisScaleFactor | Faktor skala sumbu | 1 |
| axisLabelFactor | Faktor untuk menyesuaikan posisi label sumbu | 1.05 |
| curveTension | Tegangan kurva bersudut tumpul | 0.17 |
Variabel tema
Variabel tema global
Nilai bawaan variabel-variabel ini bergantung pada tema yang digunakan. Untuk menimpa nilai bawaan, atur nilai yang diinginkan pada bagian themeVariables di konfigurasi: config: themeVariables: cScale0: "#FF0000" cScale1: "#00FF00"
Diagram radar mendukung skala warna cScale${i}, di mana i adalah angka dari 0 hingga jumlah warna maksimum pada skala warna tema. Biasanya, jumlah warna maksimum adalah 12.
| Properti | Deskripsi |
|---|---|
| fontSize | Ukuran font judul |
| titleColor | Warna judul |
| cScale$ | Skala warna kurva ke-i |
Opsi gaya radar
Variabel khusus radar terletak di dalam kunci radar. Untuk mengatur opsi gaya radar, gunakan sintaks berikut. config: themeVariables: radar: axisColor: "#FF0000"
| Properti | Deskripsi | Nilai bawaan |
|---|---|---|
| axisColor | Warna garis sumbu | black |
| axisStrokeWidth | Lebar garis sumbu | 1 |
| axisLabelFontSize | Ukuran font label sumbu | 12px |
| curveOpacity | Transparansi kurva | 0.7 |
| curveStrokeWidth | Lebar kurva | 2 |
| graticuleColor | Warna garis bujur-lintang | black |
| graticuleOpacity | Transparansi garis bujur-lintang | 0.5 |
| graticuleStrokeWidth | Lebar garis bujur-lintang | 1 |
| legendBoxSize | Ukuran kotak legenda | 10 |
| legendFontSize | Ukuran font legenda | 14px |
Contoh konfigurasi dan tema
Salin
Sematkan
---
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}
