แผนภูมิวงกลม
แผนภูมิวงกลมเป็นรูปสถิติวงกลม แบ่งออกเป็นหลายส่วนเพื่อแสดงสัดส่วนของค่า ในแผนภูมิวงกลม ความยาวส่วนโค้งของแต่ละส่วนเป็นสัดส่วนกับปริมาณที่มันแสดง
Mermaid สามารถเรนเดอร์แผนภูมิวงกลมได้
โค้ด
คัดลอก
ฝัง
pie title The most popular pets
"Dogs" : 386
"Cats" : 85
"Rats" : 15
ไวยากรณ์
การวาดแผนภูมิวงกลมใน Mermaid นั้นง่ายมาก
showData หมายถึงการเรนเดอร์ค่าจริงหลังข้อความของ legend ซึ่งเป็นตัวเลือก
- ตามด้วยไวยากรณ์ title และค่าสตริงของมัน เพื่อตั้งชื่อเรื่องให้กับแผนภูมิวงกลม ซึ่งเป็นตัวเลือก
- ถัดไปคือชุดข้อมูล ส่วนต่าง ๆ ของแผนภูมิวงกลมจะเรียงตามเข็มนาฬิกาตามลำดับของป้ายกำกับ
label ของส่วนหนึ่งในแผนภูมิวงกลม ล้อมด้วยเครื่องหมายอัญประกาศคู่
ตามด้วยเครื่องหมายทวิภาค : เป็นตัวคั่น
ตามด้วย positive numeric value แทนค่าจริง รองรับทศนิยมไม่เกินสองตำแหน่ง
mermaid.grammar_pie_data_option_title_value
ตัวอย่าง
โค้ด
คัดลอก
ฝัง
---
config:
pie:
textPosition: 0.5
themeVariables:
pieOuterStrokeWidth: "5px"
---
pie showData
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
การกำหนดค่า
แผนภูมิวงกลมรองรับพารามิเตอร์การกำหนดค่าต่อไปนี้:
| พารามิเตอร์ | คำอธิบาย | ค่าเริ่มต้น |
|---|---|---|
| textPosition | ตำแหน่งตามแนวแกนของป้ายกำกับส่วนในแผนภูมิวงกลม จาก 0.0 ที่กึ่งกลางถึง 1.0 ที่ขอบวงกลม | 0.75 |
| donutHole | สัดส่วนรูวงแหวน ช่วงค่าที่ถูกต้องคือ 0 ถึง 0.9 | 0.1 |
| legendPosition | ตำแหน่งของคำอธิบายสัญลักษณ์ (legend) เมื่อเทียบกับแผนภาพ ค่าที่ถูกต้องได้แก่ top, bottom, left, right และ center | top |
| highlightSlice | ไฮไลต์ส่วนเฉพาะที่มีป้ายกำกับตรงกัน ตั้งค่าเป็น hover เพื่อไฮไลต์ส่วนที่วางเมาส์ | hover |
