Mermaid.js XY 图表语法与配置指南

XY 图表是一种全面的数据可视化组件，用于在标准的二维网格坐标布局上绘制折线图和柱状图。该图表被引入以取代并整合较旧的独立图表模式，xychart-beta渲染引擎动态处理自定义数值数据集，自动缩放响应式结构网格，并支持同时显示多个独立的重叠数据系列。

基本语法结构

每个 XY 图表都以xychart-beta声明头开始。随后是配置水平 X 轴类别数组、垂直 Y 轴标题或数据范围限制，以及至少一个明确的数据绘图系列（例如line或bar块）。

Mermaid


在 VPasCode 中编辑 Mermaid
Mermaid Edit Mermaid in VPasCode 
xychart-beta
  title "示例性能图表"
  x-axis [一月, 二月, 三月, 四月]
  y-axis "收入（美元）"
  bar [4500, 5200, 6100, 5800]
Edit Mermaid in VPasCode



在 VPasCode 中编辑 Mermaid

语法参考

下表分解了在 Mermaid.js 中正确构建 XY 图表所需的主要数据定义和配置键。

语法组件 接受的格式 描述与使用规则
声明 关键字 初始化二维布局图表工作区。必须使用确切的xychart-beta字符串块。
标题 引号字符串 一个可选的全局标题，显示在图表画布网格正上方的中心位置。
X 轴配置 方括号列表/范围 定义水平坐标轴标签。接受方括号内的分类文本字符串[A, B, C]或数值点范围[100 --> 500].
Y轴配置 标题字符串/刻度范围 设置垂直坐标轴参数。可以只是一个轴标题字符串，也可以通过使用来自下限/上限值范围的自定义设置来限制范围"标题" 0 --> 100.
条形图系列 数值数组 将数据集渲染为垂直条形。数据数组中的元素数量必须与你的X轴类别长度完全匹配。
折线图系列 数值数组 将数据集渲染为连续线条，连接网格工作区中的数据点。

高级数据自定义（指令）

您可以通过在文档代码片段的绝对顶部嵌入一个frontmatter配置块，来微调图表工作区的视觉外观。这使您能够完全控制自定义十六进制颜色、图表系列线宽以及网格显示可见性字段的布局。

XY图表配置属性矩阵

属性配置键 值选项 视觉结果
showLine true | false 切换背景结构轴线网格线是否在坐标上显示。
chartWidth 整数（像素） 设置网格系统的固定边界画布布局宽度。
chartHeight 整数（像素） 设置网格系统的固定边界画布布局高度。
themeVariables.xyChart 颜色映射数组 注入显式的十六进制样式颜色块（例如，backgroundColor, titleColor，或自定义颜色列表槽位 plotColorPalette) 注入到您的图表中。

现实世界蓝图：多系列技术对比

此全面的蓝图用于跟踪基础设施性能审查。它使用自定义配置指令来固定画布尺寸，显示背景网格线路径，并注入显式的十六进制颜色调色板。它将四个不同的季度阶段进行映射，将其呈现为组合式视觉图表（重叠的柱状系列和线状系列图表共同呈现）。

Mermaid


在 VPasCode 中编辑 Mermaid
Mermaid Edit Mermaid in VPasCode 
---
config:
  xychart:
    chartWidth: 700
    chartHeight: 400
    showLine: true
  themeVariables:
    xychart:
      titleColor: "#0072B1"
      plotColorPalette: "#0072B1, #E06000"
---
xychart-beta
  title "Q1-Q4 资源与执行指标对比"
  x-axis ["第一季度", "第二季度", "第三季度", "第四季度"]
  y-axis "性能指标单位" 0 --> 100
  bar [45, 65, 80, 95]
  line [55, 60, 72, 88]
Edit Mermaid in VPasCode



在 VPasCode 中编辑 Mermaid

语法提示： 当叠加多个数据图表时（例如在同一布局画布中运行一个 bar 数据集和一个 line 数据集），渲染引擎将按文本脚本中书写顺序堆叠或依次绘制它们。请有意地安排您的数据块，以避免画布线条上的视觉裁剪。

常见语法陷阱与系统限制

在编译维度矩阵路径时，一些细微的配置错误将破坏坐标计算。请牢记以下排查参数：

  • 数据长度不匹配： 每一个 bar 或 线条 数据系列数组 *必须* 包含与您定义的完全相同数量的条目，x轴 列表参数。在您的X轴上有4个类别，但提供包含5个数字的数据列表将完全导致图表编译失败。
  • 引号边界： 在轴列表方括号内指定类别时，包含空格或特殊标点符号的文本块必须用双引号清晰地包围（例如，["阶段1", "阶段2"]).
  • 数值坐标边界： 在轴刻度上设置手动范围时（例如，0 --> 500），您必须明确使用两个连字符后跟大于号（-->）。忘记一个连字符或用空格分隔操作符字符将触发处理布局错误。
  • 正整数权重： 刻度值映射到线性空间块。确保传递给您的系列的值不包含未转义的字符元素或数组内的空参数空值。
滚动至顶部