- 01 Markdown 简介
- 02 Markdown 导出 HTML
- 03 Markdown 分级标题
- 04 Markdown 段落
- 05 Markdown 分割线
- 06 Markdown 列表
- 07 Markdown 引用
- 08 Markdown 强调
- 09 Markdown 辅助线
- 10 Markdown 字体字号
- 11 Markdown 前景色、背景色
- 12 Markdown 行内代码
- 13 Markdown 代码块
- 14 Markdown 超链接
- 15 Markdown 图片
- 16 Markdown 任务列表
- 17 Markdown 特殊符号
- 18 Markdown 代码高亮
- 19 Markdown 注释
- 20 Markdown 表格
- 21 Markdown 流程图
- 22 Markdown 时序图
- 23 Markdown 类图
- 24 Markdown 状态图
- 25 Markdown 甘特图
- 26 Markdown 饼图
- 27 Markdown 上标、下标
- 28 Markdown 数学公式
- 29 Markdown 脚注尾注
- 30 Markdown 生成目录
- 31 Markdown 综合实例
文章来源于网络收集而来,版权归原创者所有,如有侵权请及时联系!
26 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 的饼图渲染后内容项颜色对应于内容项在声明时的次序。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论