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 |
| X 轴 | X 轴配置 | AxisConfig |
| Y 轴 | Y 轴配置 | AxisConfig |
| 图表方向 | 'vertical' 或 'horizontal' | 'vertical' |
| 绘图保留空间百分比 | 绘图在图表内所占的最小空间 | 50 |
AxisConfig
| 参数 | 描述 | 默认值 |
|---|---|---|
| 显示标签 | 显示轴标签或刻度值 | true |
| 标签字体大小 | 要绘制的标签的字体大小 | 14 |
| 标签填充 | 标签的顶部和底部填充 | 5 |
| 显示标题 | 是否显示轴标题 | true |
| 标题字体大小 | 轴标题的字体大小 | 16 |
| 标题填充 | 轴标题的顶部和底部填充 | 5 |
| 显示刻度 | 是否显示刻度 | true |
| 刻度长度 | 刻度的长度 | 5 |
| 刻度宽度 | 刻度的宽度 | 2 |
| 显示轴线 | 是否显示轴线 | true |
| 轴线宽度 | 轴线的厚度 | 2 |
图表主题变量
信息
XY 图表的主题位于 xychart 属性内，因此要设置变量，请使用以下语法 %%{init: { "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%%
| 参数 | 描述 |
|---|---|
| 背景颜色 | 整个图表的背景颜色 |
| 标题颜色 | 标题文本的颜色 |
| X 轴标签颜色 | X 轴标签的颜色 |
| X 轴标题颜色 | X 轴标题的颜色 |
| X 轴刻度颜色 | X 轴刻度的颜色 |
| X 轴线颜色 | X 轴线的颜色 |
| Y 轴标签颜色 | Y 轴标签的颜色 |
| Y 轴标题颜色 | Y 轴标题的颜色 |
| Y 轴刻度颜色 | Y 轴刻度的颜色 |
| Y 轴线颜色 | Y 轴线的颜色 |
| 绘图颜色调色板 | 用逗号分隔的颜色字符串，例如 "#f3456, #43445" |