XY 图表

🌐 XY Chart

在 mermaid-js 的背景下，XY 图表是一个综合的图表模块，涵盖使用 x 轴和 y 轴进行数据表示的各种类型的图表。目前，它包括两种基本图表类型：柱状图和折线图。这些图表旨在直观地显示和分析涉及两个数值变量的数据。

需要注意的是，虽然目前的 mermaid-js 实现包含这两种图表类型，但该框架是设计为动态和可适应的。因此，它具备扩展能力，并且将来可以包含更多的图表类型。这意味着用户可以期待 XY 图表模块中不断发展的图表选项，以满足随着新图表类型引入而不断变化的数据可视化需求。

示例

🌐 Example

语法

🌐 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

1. x-axis title min --> max x 轴将在给定范围内作为数值使用
2. 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

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

信息

如果未提供，x 轴和 y 轴都是可选的，我们将尝试创建范围

折线图

🌐 Line chart

折线图能够以图形方式显示线条。

🌐 A line chart offers the capability to graphically depict lines.

示例

🌐 Example

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

柱状图

🌐 Bar chart

柱状图能够以图形方式显示条形。

🌐 A bar chart offers the capability to graphically depict bars.

示例

🌐 Example

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

最简单的例子

🌐 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
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

图表主题变量

🌐 Chart Theme Variables

xychart 的主题位于 xychart 属性中，可以通过以下语法进行自定义：

🌐 Themes for xychart reside inside the xychart attribute, allowing customization through the following syntax:

---
config:
  themeVariables:
    xyChart:
      titleColor: '#ff0000'
---

参数	描述
backgroundColor	整个图表的背景颜色
titleColor	标题文字的颜色
dataLabelColor	数据标签的颜色（如果显示）
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).

在柱状图上显示单个数值 (v<MERMAID_RELEASE_VERSION>+)

🌐 Displaying individual values on a bar chart (v<MERMAID_RELEASE_VERSION>+)

要显示与某个条形对应的值，请指定 showDataLabel: true。

🌐 To show the value corresponding to a bar specify showDataLabel: true.

标签默认显示在条形内。要在条形外显示标签，请指定 showDataLabelOutsideBar: true。

🌐 Labels are shown within the bar by default. To show the labels outside the bar, specify showDataLabelOutsideBar: true.

配置和主题示例

🌐 Example on config and theme