流程類
圖形化表達方式
思維類
結構化表達方式
筆記類
高效化表達方式

圓餅圖語法

圓餅圖

圓餅圖是一種圓形統計圖形,將其劃分為多個扇形來顯示數值比例。在圓餅圖中,每個扇形的弧長與其表示的數量成正比。

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