XY圖
XY 圖是一個綜合的圖表模組，使用 x 軸和 y 軸進行資料表示的圖表
範例
代碼
複製
嵌入
xychart-beta
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
語法
資訊
所有只包含一個單字的文字值都可以不用雙引號書寫。如果文字值中包含多個單字，特別是包含空格，需要用雙引號括起來。
方向
圖表可以水平或垂直繪製，預設為垂直。
複製
嵌入
xychart-beta horizontal
...
標題
標題是對圖表的簡短描述，它始終渲染在圖表頂部。
範例
複製
嵌入
xychart-beta
title "This is a simple example"
...
x 軸
x 軸主要表示分類值，儘管它也可以作為數值範圍使用。
範例
- 使用 min --> max 指定 x 軸的數值範圍
- 使用 title 為 x 軸設定標題文字
y 軸
y 軸用於表示數值範圍，它不能有分類值。
範例
- y-axis title min --> max
- 它只會新增標題，範圍將根據資料自動產生
折線圖
折線圖提供了以圖形方式展示線條的功能。
範例
- 支援同時繪製多條折線
- 支援同時繪製多組折線序列
長條圖
長條圖能夠以圖形方式顯示長條。
範例
- 支援同時繪製多條柱狀
- 支援同時繪製多組柱狀序列
簡單例子
唯一需要的兩個元素是圖表名稱 xychart 和一個資料集。因此，你將能夠使用簡單的設定來繪製圖表。
複製
嵌入
xychart-beta
line [+1.3, .6, 2.4, -.34]
圖表設定
| 參數 | 描述 | 預設值 |
|---|---|---|
| width | 圖表寬度 | 700 |
| height | 圖表高度 | 500 |
| titlePadding | 標題上下內邊距 | 10 |
| titleFontSize | 標題字型大小 | 20 |
| showTitle | 標題是否顯示 | true |
| xAxis | x 軸設定 | AxisConfig |
| yAxis | y 軸設定 | AxisConfig |
| plotReservedSpacePercent | 圖表中各圖形佔用的最小空間百分比 | 50 |
| showDataLabel | 是否在長條圖內顯示對應數值 | false |
AxisConfig
| 參數 | 描述 | 預設值 |
|---|---|---|
| showLabel | 是否顯示軸標籤或刻度值 | true |
| labelFontSize | 要繪製的標籤字型大小 | 14 |
| labelPadding | 標籤上下間距 | 5 |
| showTitle | 是否顯示軸標題 | true |
| titleFontSize | 軸標題字型大小 | 16 |
| titlePadding | 軸標題上下間距 | 5 |
| showTick | 是否顯示刻度 | true |
| tickLength | 刻度長度 | 5 |
| tickWidth | 刻度寬度 | 2 |
| showAxisLine | 軸線是否顯示 | true |
| axisLineWidth | 軸線粗細 | 2 |
圖表主題變數
xychart 的主題位於 xychart 屬性中，可以透過以下語法進行自訂：
複製
嵌入
---
config:
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" |
設定和主題範例
代碼
複製
嵌入
---
config:
xyChart:
width: 900
height: 600
showDataLabel: true
themeVariables:
xyChart:
titleColor: "#f96"
---
xychart-beta
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
