拓冰网站定制 
几行文本做出专业饼图和柱状图Mermaid.js 文本数据可视化完整指南【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid周二上午周报还差一张各渠道流量占比的图。按惯例你得打开表格软件调配色、对齐标签、修字体折腾二十分钟再截图贴进文档。这一次你打开文本编辑器敲了五行字——这是 Mermaid.js 的文本饼图定义——渲染出来就是可以直接交的图旁边的销售对比柱状图也是同一套写法出来的。这篇指南带你用纯文本快速做出专业级饼图与柱状图让数据可视化不再依赖复杂的图表工具。为什么把图表变成文本一次前后对比 先别急着学语法看一张对比表你会明白它替你省掉了什么环节传统做法Mermaid.js 文本图表画图在表格里拖拽、调颜色、对齐标签写 4~6 行文本改数据找到原图表文件重新编辑改一个数字重新渲染协作评审传截图同事只能看图说话纯文本可以直接 diff、评审、合并嵌入文档插图缩放就糊排版易跑位文本随文档走渲染即所见省的不只是时间还有当时这张图到底是谁改的这种找不到源文件的尴尬。图和说明写在同一个文件里数据与展示从此统一。最小可用写法3 行饼图4 行柱状图 饼图最短可运行示例它展示了饼图的完整结构pie关键字起头title后跟标题每一行是标签 : 数值。标签顺序即扇区顺时针顺序。语法拆解一共 4 步第一行以pie开头声明图表类型title后面直接写标题文字可选不加也不报错每行一个扇区标签 : 数值冒号前后各留一个空格数值必须是正数最多两位小数负数会直接报错。柱状图最短可运行示例它展示了柱状图XY Chart 模块的标准形态横轴放分类纵轴放数值范围bar后跟数据数组顺序与横轴一一对应。语法拆解一共 5 步用xychart开头旧别名xychart-beta也能用title设标题含空格时必须加引号x-axis [...]用方括号写分类标签y-axis 标题 0 -- 900用--指定纵轴范围省略范围则自动计算bar [...]写数据有几个数据就画几根柱子。让 Mermaid 图表更好用的 3 种改法 ✨showData让饼图直接显示数值默认饼图只显示图例。加上showData关键字每个扇区会带出具体数值读者不用自己心算占比适合金额比占比更重要的场景比如财务和预算汇报。同图组合柱状图上叠一条折线单一图表讲不完的故事可以一张图里放两种图形。下面的例子里柱子是销售额折线是利润率一眼看出销售额涨、利润率微落bar和line都写上了名字图例会自动出现两种数据序列不再混淆。水平柱状图长类别名不再重叠类别名一长竖版柱状图的横轴标签就开始打架。加一个horizontal图就横过来长标签安安静静排在左侧注意横竖版里两个轴的角色互换了x-axis变成数值范围y-axis放分类列表。可直接搬走的成品 下面两个模板来自高频业务场景把数字换成你自己的就能用。模板 A渠道流量占比饼图带数值给运营周报用占比之和为 100读者不用换算超过 6 个分类时建议把小的合并成其他。模板 B季度收入对比多序列柱状图两行bar各带一个系列名图例自动区分适合对比多条业务线谁在增长。接上 Mermaid.js 高频踩坑 接入方法两条路Markdown 环境支持 Mermaid 的编辑器或文档平台里直接写 js import mermaid from mermaid;mermaid.initialize({ startOnLoad: true, theme: default });页面中所有标记为 mermaid 的文本块会在加载时自动渲染成 SVG。想跑本地源码可以 git clone https://gitcode.com/GitHub_Trending/me/mermaid 后按 [docs/](https://link.gitcode.com/i/291bffb32a90d6267ac4759da4fef5a5) 中的开发说明操作。 **高频坑问与答** - **Q写 xychart-beta 不认** Axychart-beta 是旧别名目前仍可使用新文档推荐 xychart两者都能跑二选一保持一致即可。 - **Q饼图报错了** A饼图数值必须是正数0 和负数都不行改成正数即好。 - **Q标题或标签显示异常** A凡是含空格的文本值标题、轴名、序列名都要加引号单词才可以省略。 - **Q怎么把图存成图片** A在线编辑器里直接导出 PNG/SVG 或复制到剪贴板下图就是导出面板 [](https://link.gitcode.com/i/fcb3db9a80ee95c2dade7b5ef93e4626) - **Q图表会自适应宽度吗** A会。渲染产物是 SVG随容器缩放投屏和小屏都不会糊。 [](https://link.gitcode.com/i/fcb3db9a80ee95c2dade7b5ef93e4626) 左边写文本、右边出图就是 Mermaid 的日常使用方式——改一个数字预览立刻刷新。 ## 下一步现在就写一个最小饼图 把上面饼图示例里的 4 个分类换成你手头的数据粘贴进任意支持 Mermaid 的编辑器30 秒内你会看到自己的第一张专业饼图。 再往后同一套纯文本画图的路子可以平移到流程图、甘特图、时序图——比如这张甘特图同样是几行文本画出来的项目时间线 [](https://link.gitcode.com/i/fcb3db9a80ee95c2dade7b5ef93e4626) 想深入语法细节可以看 [饼图语法文档 docs/syntax/pie.md](https://link.gitcode.com/i/049f8a7cfa625237a7549fc0a33d47ea)、[XY Chart 语法文档 docs/syntax/xyChart.md](https://link.gitcode.com/i/41259617fad3a51d8ccd77d6c4a9fb2f)实现代码在 [packages/mermaid/src/](https://link.gitcode.com/i/e40cb218207a7895c350ba51dfe725b2)随时欢迎顺着读下去。【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 几行文本做出专业饼图和柱状图：Mermaid.js 文本数据可视化完整指南
几行文本做出专业饼图和柱状图Mermaid.js 文本数据可视化完整指南【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid周二上午周报还差一张各渠道流量占比的图。按惯例你得打开表格软件调配色、对齐标签、修字体折腾二十分钟再截图贴进文档。这一次你打开文本编辑器敲了五行字——这是 Mermaid.js 的文本饼图定义——渲染出来就是可以直接交的图旁边的销售对比柱状图也是同一套写法出来的。这篇指南带你用纯文本快速做出专业级饼图与柱状图让数据可视化不再依赖复杂的图表工具。为什么把图表变成文本一次前后对比 先别急着学语法看一张对比表你会明白它替你省掉了什么环节传统做法Mermaid.js 文本图表画图在表格里拖拽、调颜色、对齐标签写 4~6 行文本改数据找到原图表文件重新编辑改一个数字重新渲染协作评审传截图同事只能看图说话纯文本可以直接 diff、评审、合并嵌入文档插图缩放就糊排版易跑位文本随文档走渲染即所见省的不只是时间还有当时这张图到底是谁改的这种找不到源文件的尴尬。图和说明写在同一个文件里数据与展示从此统一。最小可用写法3 行饼图4 行柱状图 饼图最短可运行示例它展示了饼图的完整结构pie关键字起头title后跟标题每一行是标签 : 数值。标签顺序即扇区顺时针顺序。语法拆解一共 4 步第一行以pie开头声明图表类型title后面直接写标题文字可选不加也不报错每行一个扇区标签 : 数值冒号前后各留一个空格数值必须是正数最多两位小数负数会直接报错。柱状图最短可运行示例它展示了柱状图XY Chart 模块的标准形态横轴放分类纵轴放数值范围bar后跟数据数组顺序与横轴一一对应。语法拆解一共 5 步用xychart开头旧别名xychart-beta也能用title设标题含空格时必须加引号x-axis [...]用方括号写分类标签y-axis 标题 0 -- 900用--指定纵轴范围省略范围则自动计算bar [...]写数据有几个数据就画几根柱子。让 Mermaid 图表更好用的 3 种改法 ✨showData让饼图直接显示数值默认饼图只显示图例。加上showData关键字每个扇区会带出具体数值读者不用自己心算占比适合金额比占比更重要的场景比如财务和预算汇报。同图组合柱状图上叠一条折线单一图表讲不完的故事可以一张图里放两种图形。下面的例子里柱子是销售额折线是利润率一眼看出销售额涨、利润率微落bar和line都写上了名字图例会自动出现两种数据序列不再混淆。水平柱状图长类别名不再重叠类别名一长竖版柱状图的横轴标签就开始打架。加一个horizontal图就横过来长标签安安静静排在左侧注意横竖版里两个轴的角色互换了x-axis变成数值范围y-axis放分类列表。可直接搬走的成品 下面两个模板来自高频业务场景把数字换成你自己的就能用。模板 A渠道流量占比饼图带数值给运营周报用占比之和为 100读者不用换算超过 6 个分类时建议把小的合并成其他。模板 B季度收入对比多序列柱状图两行bar各带一个系列名图例自动区分适合对比多条业务线谁在增长。接上 Mermaid.js 高频踩坑 接入方法两条路Markdown 环境支持 Mermaid 的编辑器或文档平台里直接写 js import mermaid from mermaid;mermaid.initialize({ startOnLoad: true, theme: default });页面中所有标记为 mermaid 的文本块会在加载时自动渲染成 SVG。想跑本地源码可以 git clone https://gitcode.com/GitHub_Trending/me/mermaid 后按 [docs/](https://link.gitcode.com/i/291bffb32a90d6267ac4759da4fef5a5) 中的开发说明操作。 **高频坑问与答** - **Q写 xychart-beta 不认** Axychart-beta 是旧别名目前仍可使用新文档推荐 xychart两者都能跑二选一保持一致即可。 - **Q饼图报错了** A饼图数值必须是正数0 和负数都不行改成正数即好。 - **Q标题或标签显示异常** A凡是含空格的文本值标题、轴名、序列名都要加引号单词才可以省略。 - **Q怎么把图存成图片** A在线编辑器里直接导出 PNG/SVG 或复制到剪贴板下图就是导出面板 [](https://link.gitcode.com/i/fcb3db9a80ee95c2dade7b5ef93e4626) - **Q图表会自适应宽度吗** A会。渲染产物是 SVG随容器缩放投屏和小屏都不会糊。 [](https://link.gitcode.com/i/fcb3db9a80ee95c2dade7b5ef93e4626) 左边写文本、右边出图就是 Mermaid 的日常使用方式——改一个数字预览立刻刷新。 ## 下一步现在就写一个最小饼图 把上面饼图示例里的 4 个分类换成你手头的数据粘贴进任意支持 Mermaid 的编辑器30 秒内你会看到自己的第一张专业饼图。 再往后同一套纯文本画图的路子可以平移到流程图、甘特图、时序图——比如这张甘特图同样是几行文本画出来的项目时间线 [](https://link.gitcode.com/i/fcb3db9a80ee95c2dade7b5ef93e4626) 想深入语法细节可以看 [饼图语法文档 docs/syntax/pie.md](https://link.gitcode.com/i/049f8a7cfa625237a7549fc0a33d47ea)、[XY Chart 语法文档 docs/syntax/xyChart.md](https://link.gitcode.com/i/41259617fad3a51d8ccd77d6c4a9fb2f)实现代码在 [packages/mermaid/src/](https://link.gitcode.com/i/e40cb218207a7895c350ba51dfe725b2)随时欢迎顺着读下去。【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考