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轴标题 最小 --> 最大y-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]图表配置
| 参数 | 描述 | 默认值 |
|---|---|---|
| width | 图表的宽度 | 700 |
| height | 图表的高度 | 500 |
| titlePadding | 标题的上下内边距 | 10 |
| titleFontSize | 标题字体大小 | 20 |
| showTitle | 是否显示标题 | true |
| xAxis | x轴配置 | AxisConfig |
| yAxis | y轴配置 | AxisConfig |
| chartOrientation | 'vertical' 或 'horizontal' | 'vertical' |
| plotReservedSpacePercent | 图表中绘图将占用的最小空间 | 50 |
轴配置
| 参数 | 描述 | 默认值 |
|---|---|---|
| showLabel | 显示轴标签或刻度值 | true |
| labelFontSize | 要绘制的标签的字体大小 | 14 |
| labelPadding | 标签的上下内边距 | 5 |
| showTitle | 是否显示轴标题 | true |
| titleFontSize | 轴标题字体大小 | 16 |
| titlePadding | 轴标题的上下内边距 | 5 |
| showTick | 是否显示刻度 | true |
| tickLength | 刻度线的长度 | 5 |
| tickWidth | 刻度线的宽度 | 2 |
| showAxisLine | 是否显示轴线 | true |
| axisLineWidth | 轴线的厚度 | 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" |