XY 圖表
在 mermaid-js 的環境中，XY 圖表是一個綜合性的圖表模組，包含各種使用 x 軸和 y 軸來表示資料的圖表類型。目前，它包括兩種基本的圖表類型：長條圖和折線圖。這些圖表旨在視覺化地顯示和分析涉及兩個數值變數的資料。
值得注意的是，雖然 mermaid-js 的目前實作僅包含這兩種圖表類型，但該框架的設計是動態且可適應的。因此，它具有擴展和在未來包含其他圖表類型的能力。這表示使用者可以期待 XY 圖表模組中不斷發展的圖表選項，隨著時間的推移引入新的圖表類型，以滿足各種資料視覺化需求。
範例
語法
資訊
所有只包含一個單字的文字值都可以不使用 " 來撰寫。如果文字值中有多個單字，特別是如果它包含空格，請將該值用 " 括起來。
方向
圖表可以繪製成水平或垂直，預設值為垂直。
xychart-beta horizontal
...標題
標題是圖表的簡短描述，它將始終呈現於圖表的頂部。
範例
xychart-beta
title "This is a simple example"
...資訊
如果標題是一個單字，則無需使用 "，但如果有空格，則需要使用 "。
x 軸
x 軸主要用作類別值，但必要時也可以用作數值範圍值。
範例
x-axis title min --> maxx 軸將作為具有給定範圍的數值。x-axis "title with space" [cat1, "cat2 with space", cat3]x 軸是類別的，類別是文字類型。
y 軸
y 軸用於表示數值範圍值，它不能有類別值。
範例
y-axis title min --> maxy-axis title它只會添加標題，範圍將根據資料自動產生。
資訊
如果未提供 x 軸和 y 軸，則兩者都是可選的，我們會嘗試建立範圍。
折線圖
折線圖提供以圖形方式描繪線條的功能。
範例
line [2.3, 45, .98, -3.4]它可以包含所有有效的數值。
長條圖
長條圖提供以圖形方式描繪長條的功能。
範例
bar [2.3, 45, .98, -3.4]它可以包含所有有效的數值。
最簡單的範例
唯一需要的兩件事是圖表名稱 (xychart-beta) 和一個資料集。因此，您將能夠使用像這樣的簡單配置繪製圖表
xychart-beta
line [+1.3, .6, 2.4, -.34]圖表設定
| 參數 | 描述 | 預設值 |
|---|---|---|
| 寬度 | 圖表的寬度 | 700 |
| 高度 | 圖表的高度 | 500 |
| 標題邊距 | 標題的頂部和底部邊距 | 10 |
| 標題字型大小 | 標題字型大小 | 20 |
| 顯示標題 | 是否顯示標題 | true |
| xAxis | xAxis 設定 | AxisConfig |
| yAxis | yAxis 設定 | AxisConfig |
| 圖表方向 | '垂直' 或 '水平' | '垂直' |
| 繪圖保留空間百分比 | 繪圖在圖表內所佔的最小空間 | 50 |
AxisConfig
| 參數 | 描述 | 預設值 |
|---|---|---|
| 顯示標籤 | 顯示軸標籤或刻度值 | true |
| 標籤字型大小 | 要繪製的標籤字型大小 | 14 |
| 標籤邊距 | 標籤的頂部和底部邊距 | 5 |
| 顯示標題 | 是否顯示軸標題 | true |
| 標題字型大小 | 軸標題字型大小 | 16 |
| 標題邊距 | 軸標題的頂部和底部邊距 | 5 |
| 顯示刻度 | 是否顯示刻度 | true |
| 刻度長度 | 刻度的長度 | 5 |
| 刻度寬度 | 刻度的寬度 | 2 |
| 顯示軸線 | 是否顯示軸線 | true |
| 軸線寬度 | 軸線的粗細 | 2 |
圖表主題變數
資訊
xychart 的主題位於 xychart 屬性內，因此要設定變數，請使用以下語法 %%{init: { "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%%
| 參數 | 描述 |
|---|---|
| backgroundColor | 整個圖表的背景顏色 |
| titleColor | 標題文字的顏色 |
| xAxisLabelColor | x 軸標籤的顏色 |
| xAxisTitleColor | x 軸標題的顏色 |
| xAxisTickColor | x 軸刻度的顏色 |
| xAxisLineColor | x 軸線的顏色 |
| yAxisLabelColor | y 軸標籤的顏色 |
| yAxisTitleColor | y 軸標題的顏色 |
| yAxisTickColor | y 軸刻度的顏色 |
| yAxisLineColor | y 軸線的顏色 |
| plotColorPalette | 以逗號分隔的顏色字串，例如 "#f3456, #43445" |