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 的餅圖渲染后內容項顏色對應于內容項在聲明時的次序。