您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

Markdown 饼图

1. 前言

Markdown 的原生语法绘制图形,但通过扩展模块,我们可以将一些格式化的渲染成我们需要的图形。常用的图形有 “流程图”、“”、“类图”、“状态图”、“甘特图”、"饼图" 等。

本章,我们将主要介绍「饼图」。

饼图(Pie chart)是将圆形,分成面积相同或不同的若干区域,用来表示不同占比的图形。

环境说明
考虑到 Markdown 工具之不兼容,有的直接从复制粘贴到本地不会正常,大家学习时自己动手写是肯定没问题的。本节所有实例及演示均使用 Typora 工具完成。
Mermaid 为 Markdown 扩展语法,需要在 Typora 设置中开启对图表的语法。其方式为:「设置」->「Markdown」->「Markdown 扩展语法」-> 勾选「图表」,如下图:

2. 语法详解

饼图的定义包含「」、「」和「权重」三项,其中「权重」会在渲染时,转换为百分比并在饼图上。

实例 1

pie title 宠物的选择    "狗" : 386    "猫" : 85    "兔子" : 15

其渲染如下:

3. 使用场景及实例

饼图的作用是展示每份样本占据总数的百分比。

实例 2

pie title 城市生存训练能力占比    "独立自理" : 15    "情商" : 20    "人际交往" : 15     "地理常识" : 10     "财商" : 10    "安全防护" : 20     "感恩之心" : 10

其渲染如下:

4. 小结

Mermaid 为 Markdown 扩展了使用普通文本饼图的语法及渲染;

Mermaid 可以用文本描述饼图中的「」、「」、「权重」三个部分。

Mermaid 的饼图渲染后项颜色对应于项在声明时的次序。


联系我
置顶