Mermaid.js 雷達圖語法與資料指南

雷達圖是用於以圓形統計圖形顯示數值比例的圖表，透過將資料分割成扇形來呈現。在 Mermaid.js 中，您可以自動建立乾淨、響應式的資料分解圖，無需處理複雜的圖表庫或向量設計工具。渲染引擎會動態處理所有顏色分配與百分比計算。

基本語法結構

每個雷達圖都以 pie宣告開始。您可以選擇性地包含標題，後面接著資料項目，其中類別標籤需以引號包覆，並與正數值配對。

pie
title 範例雷達圖
"類別 A" : 45
"類別 B" : 30
"類別 C" : 25

Edit Mermaid in VPasCode

在 VPasCode 中編輯 Mermaid

語法參考

下表分解了在 Mermaid.js 中構建雷達圖地圖所使用的核心結構選項。

元件	描述	語法範例
宣告	初始化雷達圖渲染引擎。	`pie`
顯示資料標誌	在 `pie`之後加入的選擇性修飾符，用於在顯示計算出的百分比之同時，也顯示實際數字。	`pie showData`
標題	可選擇性地在圖形佈局中心上方清晰顯示的標題。	`title 第三季收入來源`
資料項目標籤	類別名稱，必須始終以雙引號包覆。	`"自然搜尋"`
資料分隔符	冒號字元用於分隔您的標籤字串及其數學值。	`:`
資料值	一個正數。支援絕對計數或直接的小數權重，最多兩位小數。	`54.25`

現實世界範本：網站流量來源

此範本展示了經典的行銷與分析儀表板分解。它使用 showData 參數來明確顯示原始流量指標，直接顯示在圖例中，而圖表則呈現佈局比例。

Mermaid

在 VPasCode 中編輯 Mermaid

Mermaid Edit Mermaid in VPasCode

pie showData title 核心流量管道
"自然搜尋" : 3540
"直接流量" : 2410
"社群媒體" : 1850
"推薦網站" : 920
"電子郵件活動" : 680

Edit Mermaid in VPasCode

在 VPasCode 中編輯 Mermaid

語法提示： 預設情況下，Mermaid 僅在每個圖表區塊上顯示相對計算的百分比（例如，35%）。在 showData 關鍵字後立即加入 pie 可將標籤變更為同時顯示圖表上的百分比以及附帶圖例清單中的精確原始值。

進階概念：指令與格式化

對於高密度文件頁面，您可以在程式碼片段的頂部應用內聯配置指令，以自訂樣式行為、變更文字放置偏移量，或修改結構線條樣式。

Mermaid

在 VPasCode 中編輯 Mermaid

Mermaid Edit Mermaid in VPasCode

---
config:
  pie:
    textPosition: 0.6
  themeVariables:
    pieOuterStrokeWidth: "3px"
---
pie title 營運預算分配
"產品開發" : 40.5
"行銷與成長" : 25.25
"客戶營運" : 20.0
"行政開支" : 14.25

Edit Mermaid in VPasCode

在 VPasCode 中編輯 Mermaid

常見語法陷阱

雖然餅圖在 Mermaid 中語法最簡單之一，但幾項格式錯誤會導致佈局解析失敗。請避免這些常見錯誤：

負數： 渲染引擎僅接受正數值。傳遞負數或零將會導致數學處理邊界失效。
引號要求： 數據類別標籤必須始終使用雙引號。單引號或缺少引號將無法正確構建。
小數精確度限制： 雖然 Mermaid 可以順利處理精確的浮點小數，但它原生僅追蹤最多兩位小數的參數。事先四捨五入數值可確保嚴格的一致性。
切片密度： 為確保清晰的視覺溝通，最佳實務是將圖表的切片數量限制在 6 到 8 個之間。如果您的資料集包含更多元素，請將較小的節點歸類到「其他」項目下，以保持設計的可掃描性。