Mermaid.js XY 圖表語法與設定指南

XY 圖表是一種全面的資料視覺化元件，用於在標準的二維網格座標佈局上呈現折線圖和長條圖。此圖表引入以取代並整合較舊的獨立圖表架構，xychart-beta渲染引擎會動態處理自訂的數值資料集，自動調整適應性的結構網格，並支援同時顯示多個獨立且重疊的資料系列。

基本語法結構

每個 XY 圖表都以xychart-beta宣告標頭開始。接下來是設定水平 X 軸的類別陣列、垂直 Y 軸的標題或資料範圍限制，以及至少一個明確的資料繪製系列（例如line或bar區塊）。

Mermaid


在 VPasCode 中編輯 Mermaid
Mermaid Edit Mermaid in VPasCode 
xychart-beta
  title "範例效能圖表"
  x-axis [一月, 二月, 三月, 四月]
  y-axis "營收（美元）"
  bar [4500, 5200, 6100, 5800]
Edit Mermaid in VPasCode



在 VPasCode 中編輯 Mermaid

語法參考

下表分解了在 Mermaid.js 中正確建立 XY 圖表所需的主資料定義與設定金鑰。

語法元件 接受的格式 描述與使用規則
宣告 關鍵字 初始化二維佈局圖表工作區。必須使用精確的xychart-beta字串區塊。
標題 引號字串 一個可選的全域標題，會以居中方式顯示在圖表畫布網格的正上方。
X 軸設定 方括號清單 / 範圍 定義水平刻度標籤。接受方括號內的分類文字字串[A, B, C] 或數值點範圍[100 --> 500].
Y軸設定 標題字串 / 刻度範圍 設定垂直刻度參數。可以僅為軸標題字串，或使用以下方式自訂以限制下限/上限值範圍"標題" 0 --> 100.
條形圖繪製系列 數值陣列 將資料集渲染為垂直條形。資料陣列中的元素數量必須與您的X軸類別長度完全匹配。
折線圖繪製系列 數值陣列 將資料集渲染為連續線條，連接網格工作區中的資料點。

進階資料自訂（指令）

您可以在文件程式碼片段的絕對頂端嵌入前言設定區塊，以微調您的圖表工作區的視覺外觀。這讓您能完全控制自訂十六進位顏色、圖表系列線條粗細以及網格顯示可見性欄位。

XY圖表設定屬性矩陣

屬性設定金鑰 值選項 視覺結果
showLine true | false 切換背景結構性軸線網格線是否在座標上顯示。
chartWidth 整數（像素） 設定網格系統的固定邊框畫布佈局寬度。
chartHeight 整數（像素） 設定網格系統的固定邊框畫布佈局高度。
themeVariables.xyChart 色彩對應陣列 注入明確的十六進位樣式色彩區塊（例如，backgroundColor, titleColor，或自訂色彩清單插槽plotColorPalette）注入您的圖表中。

現實世界藍圖：多系列技術對比

此全面的藍圖用於追蹤基礎設施效能審查。它使用自訂設定指令來固定畫布尺寸、顯示背景網格線路徑，並注入明確的十六進位色彩調色板。它將四個不同的季度階段進行映射，以合併的視覺組合圖表形式呈現（重疊的長條系列與線狀系列圖表共同顯示）。

Mermaid


在 VPasCode 中編輯 Mermaid
Mermaid Edit Mermaid in VPasCode 
---
config:
  xychart:
    chartWidth: 700
    chartHeight: 400
    showLine: true
  themeVariables:
    xychart:
      titleColor: "#0072B1"
      plotColorPalette: "#0072B1, #E06000"
---
xychart-beta
  title "Q1-Q4 資源對執行指標"
  x-axis ["第一季", "第二季", "第三季", "第四季"]
  y-axis "效能指標單位" 0 --> 100
  bar [45, 65, 80, 95]
  line [55, 60, 72, 88]
Edit Mermaid in VPasCode



在 VPasCode 中編輯 Mermaid

語法提示： 當疊加多個資料圖表時（例如在同一佈局畫布中執行一個bar資料集與一個line資料集），渲染引擎會依序堆疊或繪製，按照文字腳本中書寫的順序。請有意識地安排您的資料區塊，以避免畫布線路上出現視覺裁切。

常見語法陷阱與系統限制

在編譯維度矩陣路徑時，一些細微的設定錯誤會導致座標計算中斷。請記住這些故障排除參數：

  • 資料長度不匹配： 每一個bar 或 線 數據系列陣列 *必須* 包含與您定義的完全相同數量的項目x軸 清單參數。在您的 x 軸上有 4 個類別，但提供 5 個數字的數據清單將完全導致圖表編譯失敗。
  • 引號邊界： 當在軸列表方括號內指定類別時，包含空格或特殊標點符號的文字塊必須乾淨地用雙引號括起來（例如，["階段 1", "階段 2"]).
  • 數值坐標範圍： 當在軸刻度上設定手動範圍時（例如0 --> 500），您必須明確使用兩個連字符後跟大於符號（-->）。遺忘連字符或用空格分隔運算符字符將觸發處理佈局錯誤。
  • 正整數權重： 刻度值映射到線性空間區塊。確保傳遞給您的系列的值不包含未轉義的字符元素或陣列內的空參數空值。
返回頂端