圓餅圖
圓餅圖是一種圓形統計圖形,將其劃分為多個扇形來顯示數值比例。在圓餅圖中,每個扇形的弧長與其表示的數量成正比。
Mermaid 可以渲染圓餅圖。
代碼
複製
嵌入
pie title The most popular pets
"Dogs" : 386
"Cats" : 85
"Rats" : 15
語法
在 Mermaid 中繪製圓餅圖非常簡單。
showData 表示在圖例文字之後渲染實際數值,這是選項。
- 後面跟著 title 語法及其字串值,為圓餅圖設定標題,這是選項。
- 接下來是資料集,圓餅圖的扇形將按照標籤的順序順時針排列。
圓餅圖中某一部分的 label,用雙引號括起來。
後跟冒號 : 作為分隔符。
後面跟著 positive numeric 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 | 圖例相對於圖表的位置。有效值為 top、bottom、left、right 和 center。 | top |
| highlightSlice | 醒目提示具有符合標籤的特定扇形,設定為 hover 可醒目提示游標停留的扇形。 | hover |