Markdown 餅圖

1. 前言

Markdown 的原生語法不支持繪制圖形，但通過擴展模塊，我們可以將一些格式化的文字渲染成我們需要的圖形。常用的圖形有 “流程圖”、“時序圖”、“類圖”、“狀態(tài)圖”、“甘特圖”、"餅圖" 等。

本章，我們將主要介紹「餅圖」。

餅圖（Pie chart）是將一個圓形，分成面積相同或不同的若干區(qū)域，用來表示不同內(nèi)容占比的圖形。

環(huán)境說明：
考慮到 Markdown 工具之間的不兼容，有的內(nèi)容直接從頁面復制粘貼到本地不會正常顯示，大家學習時自己動手寫是肯定沒問題的。本節(jié)所有實例代碼及演示效果均使用 Typora 工具完成。
Mermaid 為 Markdown 擴展語法，需要在 Typora 設置中開啟對圖表的語法支持。其方式為：「設置」->「Markdown」->「Markdown 擴展語法」-> 勾選「圖表」，如下圖：

2. 語法詳解

餅圖的定義包含「標題」、「內(nèi)容名稱」和「內(nèi)容權重」三項，其中「內(nèi)容權重」會在渲染時，自動轉(zhuǎn)換為百分比并顯示在餅圖上。

實例 1：

pie title 寵物的選擇
    "狗" : 386
    "貓" : 85
    "兔子" : 15 

其渲染效果如下：

3. 使用場景及實例

餅圖的作用是展示每份樣本占據(jù)總數(shù)的百分比。

實例 2：

pie title 城市生存訓練能力占比
    "獨立自理" : 15
    "情商" : 20
    "人際交往" : 15 
    "地理常識" : 10 
    "財商" : 10
    "安全防護" : 20 
    "感恩之心" : 10 

其渲染效果如下：

4. 小結(jié)

• Mermaid 為 Markdown 擴展了使用普通文本生成餅圖的語法及渲染支持；
• Mermaid 可以用文本描述餅圖中的「標題」、「內(nèi)容名稱」、「內(nèi)容權重」三個部分。
• Mermaid 的餅圖渲染后內(nèi)容項顏色對應于內(nèi)容項在聲明時的次序。