用 Mermaid XYchart 快速画数据图表(含多系列、多样式完整版)

用 Mermaid XYchart 快速画数据图表(含多系列、多样式完整版)

在技术博客、文档、笔记里可视化数据,不用复杂工具,Mermaid xychart-beta 纯文本就能生成专业的柱状图、折线图,支持多系列、自定义配色,兼容 GitHub、Obsidian、VuePress、语雀等平台。

一、核心优势

  • 纯文本语法,可 Git 管理、方便复制粘贴
  • 支持折线、柱状、多数据系列对比
  • 自带标题、坐标轴、配色美化
  • 零配置开箱即用

二、最简入门示例

月度访问量 1月 2月 3月 4月 5月 1000 900 800 700 600 500 400 300 200 100 0

三、多系列 + 自定义配色(推荐直接用)

1. 双柱状图对比

产品A vs 产品B 月度销量 1月 2月 3月 4月 5月 600 550 500 450 400 350 300 250 200 150 100 50 0

2. 双折线图趋势对比

转化率与点击率趋势 周一 周二 周三 周四 周五 10 9 8 7 6 5 4 3 2 1 0

3. 柱状 + 折线组合(最常用)

销量与增长率 Q1 Q2 Q3 Q4 1000 900 800 700 600 500 400 300 200 100 0

四、常用语法速记

  • xychart-beta:固定图表类型
  • title:图表标题
  • x-axis []:X 轴标签
  • y-axis 起始 --> 结束:Y 轴范围
  • bar [数据]:柱状图
  • line [数据]:折线图
  • 支持同时写多个 bar / line 做多系列对比

以后写博客、做笔记、写技术方案,需要图表直接复制这些模板,干净、高效、可维护。

需要我再给你一份带颜色主题、坐标轴名称、带数值标签的高级版模板吗?

相关推荐
70asunflower5 天前
# Mermaid 技术介绍文档
绘图·mermaid
belldeep10 天前
Java:Tomcat 9 和 mermaid.min.js 10.9 上传.csv文件实现 Markdown 中 Mermaid 图表的渲染
java·tomcat·mermaid·去除flexmark
belldeep13 天前
Java:Tomcat 9, flexmark 0.6 和 mermaid.min.js 10.9 实现 Markdown 中 Mermaid 图表的渲染
java·tomcat·mermaid·flexmark
belldeep14 天前
nodejs v18.20 如何使用 express markdown-it 和 mermaid.min.js 10.9
nodejs·express·markdown·mermaid
放飞自我的Coder15 天前
【Mermaid本地实时渲染 单html本地直接运行】
html·mermaid
ucancode22 天前
AI --> Mermaid --> 图形可视化 (UI)
人工智能·ui·ai·mermaid
不剪发的Tony老师23 天前
Modern Mermaid:一款现代化的Mermaid图表编辑器
mermaid·图表编辑器
weixin_462446231 个月前
使用 Python 测试 Mermaid 与 Graphviz 图表生成(支持中文)
python·mermaid·graphviz
红桃Jk1 个月前
关于开发文档向 Markdown(Docs-as-Code)转型的可行性研究报告
ai·mermaid