XY 图表

¥XY Chart

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

¥In the context of mermaid-js, the XY chart is a comprehensive charting module that encompasses various types of charts that utilize both x-axis and y-axis for data representation. Presently, it includes two fundamental chart types: the bar chart and the line chart. These charts are designed to visually display and analyze data that involve two numerical variables.

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

¥It's important to note that while the current implementation of mermaid-js includes these two chart types, the framework is designed to be dynamic and adaptable. Therefore, it has the capacity for expansion and the inclusion of additional chart types in the future. This means that users can expect an evolving suite of charting options within the XY chart module, catering to various data visualization needs as new chart types are introduced over time.

示例

¥Example

语法

¥Syntax

INFO

All text values that contain only one word can be written without ". If a text value has many words in it, specifically if it contains spaces, enclose the value in "

方向

¥Orientations

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

¥The chart can be drawn horizontal or vertical, default value is vertical.

xychart-beta horizontal
...

标题

¥Title

标题是图表的简短描述，它将始终渲染在图表顶部。

¥The title is a short description of the chart and it will always render on top of the chart.

示例

¥Example

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

INFO

If the title is a single word one no need to use ", but if it has space " is needed

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 轴将用作给定范围内的数字

   ¥x-axis title min --> max x-axis will function as numeric with the given range

2. x-axis "title with space" [cat1, "cat2 with space", cat3] x 轴（如果是分类），类别是文本类型

   ¥x-axis "title with space" [cat1, "cat2 with space", cat3] x-axis if categorical, categories are text type

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 它只会添加标题，范围将根据数据自动生成。

   ¥y-axis title it will only add the title, the range will be auto generated from data.

INFO

Both x and y axis are optional if not provided we will try to create the range

折线图

¥Line chart

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

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

示例

¥Example

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

   ¥line [2.3, 45, .98, -3.4] it can have all valid numeric values.

柱状图

¥Bar chart

柱状图能够以图形方式描绘条形。

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

示例

¥Example

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

   ¥bar [2.3, 45, .98, -3.4] it can have all valid numeric values.

最简单的例子

¥Simplest example

唯一需要的两件事是图表名称 (xychart-beta) 和一个数据集。因此，你将能够使用简单的配置来绘制图表，例如

¥The only two things required are the chart name (xychart-beta) and one data set. So you will be able to draw a chart with a simple config like

xychart-beta
    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

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

INFO

Themes for xychart resides inside xychart attribute so to set the variables use this syntax %%{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"

配置和主题示例

¥Example on config and theme