树形图 
括号图 
思维笔记 
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轴主要表示分类值，尽管它也可以作为数值范围使用。
示例
- x-axis title min --> max x轴将在指定范围内作为数值使用
- x-axis "title with space" [cat1, "cat2 with space", cat3] 如果x轴是分类型，类别是文本类型
y轴
y轴用于表示数值范围，它不能有分类值。
示例
- y-axis title min --> max
- y-axis title 它只会添加标题，范围将根据数据自动生成。
折线图
折线图提供了以图形方式展示线条的功能。
示例
- line [2.3, 45, .98, -3.4] 它可以包含所有有效的数值。
- line "series name" [2.3, 45, .98, -3.4] 将该线添加到图表中。
柱状图
柱状图能够以图形方式显示条形。
示例
- bar [2.3, 45, .98, -3.4] 它可以包含所有有效的数值。
- bar "series name" [2.3, 45, .98, -3.4] 将该条添加到图表中。
简单例子
唯一需要的两个元素是图表名称 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]
