主题
XY 图表
🌐 XY Chart
在 mermaid-js 的背景下，XY 图表是一个综合的图表模块，涵盖使用 x 轴和 y 轴进行数据表示的各种类型的图表。目前，它包括两种基本图表类型：柱状图和折线图。这些图表旨在直观地显示和分析涉及两个数值变量的数据。
需要注意的是，虽然目前的 mermaid-js 实现包含这两种图表类型，但该框架是设计为动态和可适应的。因此，它具备扩展能力，并且将来可以包含更多的图表类型。这意味着用户可以期待 XY 图表模块中不断发展的图表选项，以满足随着新图表类型引入而不断变化的数据可视化需求。
示例
🌐 Example
代码:
mermaid
语法
🌐 Syntax
信息
所有仅包含一个单词的文本值可以不使用 " 来书写。如果文本值包含多个单词，特别是包含空格时，需要将其用 " 括起来
方向
🌐 Orientations
图表可以水平或垂直绘制，默认值为垂直。
🌐 The chart can be drawn horizontal or vertical, default value is vertical.
xychart horizontal
...标题
🌐 Title
标题是对图表的简短描述，它将始终显示在图表的顶部。
🌐 The title is a short description of the chart and it will always render on top of the chart.
示例
🌐 Example
xychart
title "This is a simple example"
...信息
如果标题只有一个单词，则不需要用“，但如果有空格则需要”
x-axis
x 轴主要用于表示分类值，尽管在需要时它也可以作为数值范围使用。
🌐 The x-axis primarily serves as a categorical value, although it can also function as a numeric range value when needed.
示例
🌐 Example
x-axis title min --> maxx 轴将在给定范围内作为数值使用x-axis "title with space" [cat1, "cat2 with space", cat3]如果x轴是分类型，类别为文本类型
y-axis
y 轴用于表示数值范围，它不能有分类值。
🌐 The y-axis is employed to represent numerical range values, it cannot have categorical values.
示例
🌐 Example
y-axis title min --> maxy-axis title它只会添加标题，范围将根据数据自动生成。
信息
如果未提供，x 轴和 y 轴都是可选的，我们将尝试创建范围
折线图
🌐 Line chart
折线图能够以图形方式显示线条。
🌐 A line chart offers the capability to graphically depict lines.
示例
🌐 Example
line [2.3, 45, .98, -3.4]它可以包含所有有效的数值。line "series name" [2.3, 45, .98, -3.4]将该线添加到图例中。
柱状图
🌐 Bar chart
柱状图能够以图形方式显示条形。
🌐 A bar chart offers the capability to graphically depict bars.
示例
🌐 Example
bar [2.3, 45, .98, -3.4]它可以包含所有有效的数值。bar "series name" [2.3, 45, .98, -3.4]将该条添加到图例中。
传奇 (v<MERMAID_RELEASE_VERSION>+)
🌐 Legend (v<MERMAID_RELEASE_VERSION>+)
命名的折线图和柱状图会自动显示在图例中。未命名的图不会出现在图例中。
🌐 Named line and bar plots are automatically shown in a legend. Unnamed plots are omitted from the legend.
代码:
mermaid
最简单的例子
🌐 Simplest example
唯一需要的两个东西是图表名称（xychart）和一组数据。因此，你可以用像这样的简单配置来绘制图表
🌐 The only two things required are the chart name (xychart) and one data set. So you will be able to draw a chart with a simple config like
xychart
line [+1.3, .6, 2.4, -.34]图表配置
🌐 Chart Configurations
| 参数 | 描述 | 默认值 |
|---|---|---|
| width | 图表宽度 | 700 |
| height | 图表高度 | 500 |
| titlePadding | 标题上下内边距 | 10 |
| titleFontSize | 标题字体大小 | 20 |
| showTitle | 是否显示标题 | true |
| showLegend | 是否为命名曲线显示图例 | true |
| legendFontSize | 图例字体大小 | 14 |
| legendPadding | 图例周围的内边距 | 10 |
| xAxis | x轴配置 | AxisConfig |
| yAxis | y轴配置 | AxisConfig |
| chartOrientation | 'vertical' 或 'horizontal' | 'vertical' |
| plotReservedSpacePercent | 图表中各图形占用的最小空间百分比 | 50 |
| showDataLabel | 是否在柱状图内显示对应数值 | false |
| showDataLabelOutsideBar | 如果显示数据标签，则是否显示在柱外 | false |
AxisConfig
| 参数 | 描述 | 默认值 |
|---|---|---|
| showLabel | 是否显示轴标签或刻度值 | true |
| labelFontSize | 要绘制的标签字体大小 | 14 |
| labelPadding | 标签上下间距 | 5 |
| showTitle | 是否显示轴标题 | true |
| titleFontSize | 轴标题字体大小 | 16 |
| titlePadding | 轴标题上下间距 | 5 |
| showTick | 是否显示刻度 | true |
| tickLength | 刻度长度 | 5 |
| tickWidth | 刻度宽度 | 2 |
| showAxisLine | 是否显示轴线 | true |
| axisLineWidth | 轴线粗细 | 2 |
| labelRotation | 标签旋转角度（仅适用于底部X轴） | 0 |
图表主题变量
🌐 Chart Theme Variables
xychart 的主题位于 xychart 属性中，可以通过以下语法进行自定义：
🌐 Themes for xychart reside inside the xychart attribute, allowing customization through the following syntax:
yaml
---
config:
themeVariables:
xyChart:
titleColor: '#ff0000'
---| 参数 | 描述 |
|---|---|
| backgroundColor | 整个图表的背景颜色 |
| titleColor | 标题文字的颜色 |
| dataLabelColor | 数据标签的颜色（如果显示） |
| legendTextColor | 图例文字的颜色 |
| xAxisLabelColor | x 轴标签的颜色 |
| xAxisTitleColor | x 轴标题的颜色 |
| xAxisTickColor | x 轴刻度的颜色 |
| xAxisLineColor | x 轴线的颜色 |
| yAxisLabelColor | y 轴标签的颜色 |
| yAxisTitleColor | y 轴标题的颜色 |
| yAxisTickColor | y 轴刻度的颜色 |
| yAxisLineColor | y 轴线的颜色 |
| plotColorPalette | 颜色字符串，用逗号分隔，例如 "#f3456, #43445" |
设置线条和柱子的颜色
🌐 Setting Colors for Lines and Bars
要设置折线和柱状的颜色，请使用 plotColorPalette 参数。调色板中的颜色将按顺序对应图表中的各个元素（例如，第一个柱/线条将使用调色板中指定的第一个颜色）。
🌐 To set the color for lines and bars, use the plotColorPalette parameter. Colors in the palette will correspond sequentially to the elements in your chart (e.g., first bar/line will use the first color specified in the palette).
代码:
mermaid
在柱状图上显示单个数值（v11.14.0+）
🌐 Displaying individual values on a bar chart (v11.14.0+)
要显示与某个条形对应的值，请指定 showDataLabel: true。
🌐 To show the value corresponding to a bar specify showDataLabel: true.
代码:
mermaid
标签默认显示在条形内。要在条形外显示标签，请指定 showDataLabelOutsideBar: true。
🌐 Labels are shown within the bar by default. To show the labels outside the bar, specify showDataLabelOutsideBar: true.
代码:
mermaid
折线图的每点文本标签 (v<MERMAID_RELEASE_VERSION>+)
🌐 Per-point text labels for line charts (v<MERMAID_RELEASE_VERSION>+)
在 line 中，每个数据点可以在数值后面可选地包含一个带引号的字符串标签。标签在垂直方向上显示在数据点上方，或在水平方向上显示在右侧，使用线条的笔触颜色。
🌐 Each data point in a line can optionally include a quoted string label after the numeric value. Labels render above points in vertical orientation, or to the right in horizontal orientation, using the line's stroke color.
代码:
mermaid
每个点的标签是可选的——你可以混合使用有标签和值无标签的情况：
🌐 Labels are optional per point — you can mix labeled and unlabeled values:
代码:
mermaid
没有标签的现有语法仍然可以照常使用。
🌐 Existing syntax without labels continues to work unchanged.
信息
点标签使用固定的字体大小 12px。在垂直图表中，标签显示在每个点的上方。在水平图表中，标签显示在右侧。标签目前仅在 line 图上受支持；在 bar 图上语法被接受，但标签会被忽略。
配置和主题示例
🌐 Example on config and theme
代码:
mermaid