XY 图表

在 mermaid-js 的上下文中，XY 图表是一个综合性的图表模块，包含各种使用 x 轴和 y 轴表示数据的图表类型。目前，它包括两种基本图表类型：条形图和折线图。这些图表旨在直观地显示和分析涉及两个数值变量的数据。

需要注意的是，虽然当前 mermaid-js 的实现包含这两种图表类型，但该框架的设计是动态和可适应的。因此，它具有扩展能力，并可在未来添加其他图表类型。这意味着用户可以期待 XY 图表模块中不断发展的图表选项套件，以满足随着时间的推移引入新的图表类型而产生的各种数据可视化需求。

示例

Code:

语法

NOTE

所有仅包含一个单词的文本值都可以不使用 `"`。如果文本值包含多个单词，特别是包含空格，则需要将该值用 `"` 括起来

方向

图表可以水平或垂直绘制，默认值为垂直。

xychart-beta horizontal
...

标题

标题是对图表的简短描述，它始终会在图表的顶部呈现。

示例

xychart-beta
    title "This is a simple example"
    ...

NOTE

如果标题是一个单词，则无需使用 `"`, 但如果它包含空格，则需要使用 `"`

x 轴

x 轴主要用作分类值，但在需要时也可以用作数值范围值。

示例

1. x-axis title min --> max x 轴将作为具有给定范围的数值轴
2. x-axis "title with space" [cat1, "cat2 with space", cat3] x 轴如果为分类轴，则类别为文本类型

y 轴

y 轴用于表示数值范围值，不能包含分类值。

示例

1. y-axis title min --> max
2. y-axis title 它只会添加标题，范围将根据数据自动生成。

NOTE

如果未提供 x 轴和 y 轴，则我们将尝试创建范围

折线图

折线图提供了以图形方式描绘线条的功能。

示例

1. line [2.3, 45, .98, -3.4] 它可以具有所有有效的数值。

条形图

条形图提供了以图形方式描绘条形的功能。

示例

1. 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

AxisConfig

参数	描述	默认值
showLabel	显示轴标签或刻度值	true
labelFontSize	要绘制的标签的字体大小	14
labelPadding	标签的顶部和底部填充	5
showTitle	是否显示轴标题	true
titleFontSize	轴标题的字体大小	16
titlePadding	轴标题的顶部和底部填充	5
showTick	是否显示刻度	true
tickLength	刻度的长度	5
tickWidth	刻度的宽度	2
showAxisLine	是否显示轴线	true
axisLineWidth	轴线的粗细	2

图表主题变量

NOTE

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"

配置和主题示例

Code: