ความรู้เบื้องต้นเกี่ยวกับแผนภาพเรดาร์
แผนภาพเรดาร์เป็นวิธีง่าย ๆ ในการวาดข้อมูลมิติต่ำในรูปแบบวงกลม
แผนภาพเรดาร์ยังเรียกอีกชื่อว่า แผนภาพแมงมุม, แผนภาพดาว, แผนภาพตาข่าย, แผนภาพพิกัดเชิงขั้ว
การใช้งาน
แผนภาพเรดาร์มีประโยชน์เป็นพิเศษสำหรับนักพัฒนา นักวิทยาศาสตร์ข้อมูล และวิศวกร ที่ต้องแสดงข้อมูลในรูปแบบวงกลมอย่างชัดเจนและกระชับ
มักใช้เพื่อสรุปและเปรียบเทียบประสิทธิภาพของหลายเอนทิตีในหลายมิติแบบกราฟิก
ไวยากรณ์
คัดลอก
ฝัง
radar-beta
axis A, B, C, D, E
curve c1{1,2,3,4,5}
curve c2{5,4,3,2,1}
... More Fields ...
ตัวอย่าง
คัดลอก
ฝัง
---
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
รายละเอียดไวยากรณ์
ชื่อเรื่อง
title: เรนเดอร์ที่ด้านบนของแผนภาพเรดาร์
คัดลอก
ฝัง
radar-beta
title Title of the Radar Diagram
...
แกน
axis: ไวยากรณ์ axis ใช้กำหนดแกนของแผนภาพเรดาร์
แต่ละแกนแสดงด้วย ID หนึ่งตัวและป้ายกำกับที่เป็นตัวเลือกหนึ่งอัน
สามารถกำหนดหลายแกนบนบรรทัดเดียวได้
คัดลอก
ฝัง
radar-beta
axis id1["Label1"]
axis id2["Label2"], id3["Label3"]
...
เส้นโค้ง
curve: ไวยากรณ์ curve ใช้กำหนดจุดข้อมูลของเส้นโค้งในแผนภาพเรดาร์
แต่ละเส้นโค้งแสดงด้วย ID หนึ่งตัว ป้ายกำกับที่เป็นตัวเลือกหนึ่งอัน และรายการค่าหนึ่งรายการ
ค่าสามารถกำหนดได้ผ่านรายการตัวเลขหรือรายการคู่คีย์-ค่า หากใช้คู่คีย์-ค่า คีย์จะแทน ID ของแกน ส่วนค่าแทนจุดข้อมูล
สามารถกำหนดหลายเส้นโค้งบนบรรทัดเดียวได้
คัดลอก
ฝัง
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 }
...
ตัวเลือก
- showLegend: ไวยากรณ์ showLegend ใช้แสดงหรือซ่อนคำอธิบายสัญลักษณ์ (legend) ในแผนภาพเรดาร์ โดยค่าเริ่มต้นจะแสดง
- max: ค่ามากสุดของแผนภาพเรดาร์ ใช้สำหรับปรับสเกลแผนภาพเรดาร์ หากไม่ได้ระบุ ค่ามากสุดจะคำนวณจากจุดข้อมูล
- min: ค่าน้อยสุดของแผนภาพเรดาร์ ใช้สำหรับปรับสเกลแผนภาพเรดาร์ หากไม่ได้ระบุ ค่าน้อยสุดจะเป็น 0
- graticule: ไวยากรณ์ graticule ใช้กำหนดประเภทของเส้นละติจูด/ลองจิจูดที่จะเรนเดอร์ในแผนภาพเรดาร์ เส้นละติจูด/ลองจิจูดอาจเป็น circle หรือ polygon หากไม่ได้ระบุ ค่าเริ่มต้นเป็น circle
- ticks: ไวยากรณ์ ticks ใช้กำหนดจำนวนขีดบอกตำแหน่งบนเส้นละติจูด/ลองจิจูด เป็นจำนวนวงกลมร่วมศูนย์หรือรูปหลายเหลี่ยมที่วาด ใช้บ่งบอกสเกลของแผนภาพเรดาร์ หากไม่ได้ระบุ จำนวนขีดบอกตำแหน่งเริ่มต้นคือ 5
คัดลอก
ฝัง
radar-beta
...
showLegend true
max 100
min 0
graticule circle
ticks 5
...
การกำหนดค่า
| พารามิเตอร์ | คำอธิบาย | ค่าเริ่มต้น |
|---|---|---|
| width | ความกว้างของแผนภาพเรดาร์ | 600 |
| height | ความสูงของแผนภาพเรดาร์ | 600 |
| marginTop | ระยะขอบบนของแผนภาพเรดาร์ | 50 |
| marginBottom | ระยะขอบล่างของแผนภาพเรดาร์ | 50 |
| marginLeft | ระยะขอบซ้ายของแผนภาพเรดาร์ | 50 |
| marginRight | ระยะขอบขวาของแผนภาพเรดาร์ | 50 |
| axisScaleFactor | ปัจจัยการปรับสเกลของแกนพิกัด | 1 |
| axisLabelFactor | ปัจจัยในการปรับตำแหน่งป้ายกำกับแกนพิกัด | 1.05 |
| curveTension | ความตึงของเส้นโค้งแบบมุมมน | 0.17 |
ตัวแปรธีม
ตัวแปรธีมส่วนกลาง
ค่าเริ่มต้นของตัวแปรเหล่านี้ขึ้นอยู่กับธีมที่ใช้ หากต้องการเขียนทับค่าเริ่มต้น โปรดตั้งค่าที่ต้องการในส่วน themeVariables ของการกำหนดค่า: config: themeVariables: cScale0: "#FF0000" cScale1: "#00FF00"
แผนภาพเรดาร์รองรับสเกลสี cScale${i} โดย i เป็นตัวเลขตั้งแต่ 0 ถึงจำนวนสีสูงสุดของสเกลสีในธีม โดยทั่วไปจำนวนสีสูงสุดคือ 12
| คุณสมบัติ | คำอธิบาย |
|---|---|
| fontSize | ขนาดตัวอักษรของชื่อเรื่อง |
| titleColor | สีของชื่อเรื่อง |
| cScale$ | สเกลสีของเส้นโค้งที่ i |
ตัวเลือกสไตล์ของเรดาร์
ตัวแปรเฉพาะของเรดาร์อยู่ในคีย์ radar หากต้องการตั้งค่าตัวเลือกสไตล์ของเรดาร์ โปรดใช้ไวยากรณ์ต่อไปนี้ config: themeVariables: radar: axisColor: "#FF0000"
| คุณสมบัติ | คำอธิบาย | ค่าเริ่มต้น |
|---|---|---|
| axisColor | สีของเส้นแกนพิกัด | black |
| axisStrokeWidth | ความกว้างของเส้นแกนพิกัด | 1 |
| axisLabelFontSize | ขนาดตัวอักษรของป้ายกำกับแกนพิกัด | 12px |
| curveOpacity | ความโปร่งแสงของเส้นโค้ง | 0.7 |
| curveStrokeWidth | ความกว้างของเส้นโค้ง | 2 |
| graticuleColor | สีของเส้นละติจูด/ลองจิจูด | black |
| graticuleOpacity | ความโปร่งแสงของเส้นละติจูด/ลองจิจูด | 0.5 |
| graticuleStrokeWidth | ความกว้างของเส้นละติจูด/ลองจิจูด | 1 |
| legendBoxSize | ขนาดของกล่องคำอธิบายสัญลักษณ์ (legend) | 10 |
| legendFontSize | ขนาดตัวอักษรของคำอธิบายสัญลักษณ์ (legend) | 14px |
ตัวอย่างการกำหนดค่าและธีม
คัดลอก
ฝัง
---
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}
