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

Parameter	Description	Default value
width	Width of the chart	700
height	Height of the chart	500
titlePadding	Top and Bottom padding of the title	10
titleFontSize	Title font size	20
showTitle	Title to be shown or not	true
xAxis	xAxis configuration	AxisConfig
yAxis	yAxis configuration	AxisConfig
chartOrientation	'vertical' or 'horizontal'	'vertical'
plotReservedSpacePercent	Minimum space plots will take inside the chart	50
showDataLabel	Should show the value corresponding to the bar within the bar	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'
---

Parameter	Description
backgroundColor	Background color of the whole chart
titleColor	Color of the Title text
xAxisLabelColor	Color of the x-axis labels
xAxisTitleColor	Color of the x-axis title
xAxisTickColor	Color of the x-axis tick
xAxisLineColor	Color of the x-axis line
yAxisLabelColor	Color of the y-axis labels
yAxisTitleColor	Color of the y-axis title
yAxisTickColor	Color of the y-axis tick
yAxisLineColor	Color of the y-axis line
plotColorPalette	String of colors separated by comma e.g. "#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).

配置和主题示例

🌐 Example on config and theme