如何用 Mermaid 树图（treemap-beta）按数值比较层级数据的占比

如何用 Mermaid 树图treemap-beta按数值比较层级数据的占比【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid假设你手上有一组带层级的数值数据——比如按部门和产品线拆分的预算、各区域的市场份额、磁盘空间按文件夹的占用——想一眼看出每一层级中各分支占多大比例。Mermaid 的树图treemap-beta可以把这类数据渲染成一组嵌套矩形每个分支对应一个矩形矩形面积与其代表的数值成正比叶节点旁还会标出具体数值。你只需要写一段带缩进的文本就能在网页中渲染出可比较占比的树图。需要注意树图是 Mermaid 的新增图表类型官方文档明确标注其语法可能在后续版本中演进写作时应留意当前版本的treemap-beta前缀。准备工作在项目中安装 Mermaid依据 docs/config/usage.mdnpm install mermaid在 HTML 中渲染图表时把图表文本放在带mermaid类的元素内并调用mermaid.initialize完成初始化。仓库中的 demos/treemap.html 是一个可以直接查看的运行示例其核心结构如下pre classmermaid treemap-beta Root Branch 1 Leaf 1.1: 10 Leaf 1.2: 15 /pre script typemodule import mermaid from mermaid; mermaid.initialize({ theme: forest, logLevel: 1, securityLevel: loose, }); /script以上代码来自仓库 demo其中导入路径和initialize参数是该 demo 的写法按你所在项目的模块方式引入 Mermaid 即可。编写第一段树图按层级写数据树图的语法由三部分组成来自 docs/syntax/treemap.md分区/父节点Section用引号包裹的文本定义如Section 1本身不写数值它的大小由子节点数值决定带数值的叶节点Leaf引号文本后跟冒号和数值如Leaf 1.1: 12层级用缩进空格或制表符表达父子关系第一行必须是treemap-beta。先用一个扁平的两级结构比较两个分区内部各项的占比treemap-beta Category A Item A1: 10 Item A2: 20 Category B Item B1: 15 Item B2: 25再写一个三层结构用于比较大类、中类和小类之间的占比。这是文档中的层级示例treemap-beta Products Electronics Phones: 50 Computers: 30 Accessories: 20 Clothing Mens: 40 Womens: 40把上面任意一段代码放进pre classmermaid中渲染。渲染结果是嵌套矩形Products占据整个区域Electronics与Clothing的宽度按各自子项数值之和分配Phones: 50的矩形又比Computers: 30明显更大。由于每个矩形面积与其数值成正比占比大小可以直接从面积对比中读出同时showValues默认开启默认值true节点上会直接显示数值便于在面积相近时精确比较。把数值显示成百分比或金额如果你希望占比以百分比形式标注在节点上而不是小数原值可以用valueFormat配置项。文档说明该选项主要使用 D3 的 format 规则控制数值显示常见格式包括,千分位默认、$加美元符号、.1f一位小数、.1%带一位小数的百分比、$0,0、$.2f、$,.2f等。文档给出的百分比份额示例注意保留文档中的写法--- config: treemap: valueFormat: $.1% --- treemap-beta Market Share Company A: 0.35 Company B: 0.25 Company C: 0.15 Others: 0.25金额场景预算分配的示例--- config: treemap: valueFormat: $0,0 --- treemap-beta Budget Operations Salaries: 700000 Equipment: 200000 Supplies: 100000 Marketing Advertising: 400000 Events: 100000前端matter 中的config块只作用于紧随其后的这张图如果不写该块valueFormat走默认值,千分位分隔。完整的配置项与默认值见 docs/syntax/treemap.md 的配置表例如useMaxWidth默认true图宽设为 100% 并随可用空间缩放、padding节点内部间距默认 10、diagramPadding整图外边距默认 8、nodeWidth/nodeHeight默认 100/40等。可选用 classDef 高亮重点分支当你想突出某几个分区时可以给节点附加:::class样式标记再用classDef定义样式。这是文档中带样式树图的示例treemap-beta Section 1 Leaf 1.1: 12 Section 1.2:::class1 Leaf 1.2.1: 12 Section 2 Leaf 2.1: 20:::class1 Leaf 2.2: 25 Leaf 2.3: 12 classDef class1 fill:red,color:blue,stroke:#FFD600;其中class1定义了填充色、文字色和描边。仓库的 e2e/diagrams/treemap/9-should-handle-a-complex-example-with-multiple-features.mmd 是另一个更贴近预算场景的完整样例Engineering/Marketing/Sales 三个分区分别着色可以作为多分区高亮的参考。主题也可以通过前端matter 配置例如theme: forest前面 demo 代码中使用的就是该主题。验证渲染结果渲染完成后按以下现象确认图表符合预期这些判据都来自文档对默认行为与渲染规则的说明嵌套矩形结构每个 Section 是一个大矩形内部按子节点平铺更小的矩形层级与源文本的缩进一致面积与数值成比例数值大的叶节点矩形面积更大——这是树图的核心定义The size of each rectangle is proportional to the value it represents数值标注可见默认showValues: true节点上显示对应数值若你配置了valueFormat标注应按所配格式显示如百分比或带$的金额样式生效加了:::class1的节点呈现classDef定义的填充/描边颜色。想核对不同配置下的渲染效果可以参考仓库e2e/diagrams/treemap/目录下的一系列.mmd用例例如 8a-should-handle-percentage-formatting.mmd百分比数据、8-should-handle-dollar-value-formatting-with-thousands-separator.mmd金额千分位、5-should-render-with-a-forest-theme.mmdforest 主题。适用边界与限制文档在 Limitations 一节列出了树图不适用的情况写数据前应先对照检查数据最好具有天然层级结构树图才适合表达数值过小的叶节点可能难以看清或容纳标签层级过深很多层时难以清晰呈现树图不适合表达负值数据。另外再次提醒treemap-beta处于 beta 阶段文档提示其语法可能在未来版本中演进升级 Mermaid 大版本后建议重新验证既有树图文本。若你的数据没有层级、只比较单层占比文档建议改用饼图docs/syntax/pie.md若是流向型数据可看桑基图docs/syntax/sankey.md。【免费下载链接】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），仅供参考