Markdown 餅圖

1. 前言

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

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

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

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

2. 語(yǔ)法詳解

餅圖的定義包含「標(biāo)題」、「內(nèi)容名稱」和「內(nèi)容權(quán)重」三項(xiàng)，其中「內(nèi)容權(quán)重」會(huì)在渲染時(shí)，自動(dòng)轉(zhuǎn)換為百分比并顯示在餅圖上。

實(shí)例 1：

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

其渲染效果如下：

3. 使用場(chǎng)景及實(shí)例

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

實(shí)例 2：

pie title 城市生存訓(xùn)練能力占比
    "獨(dú)立自理" : 15
    "情商" : 20
    "人際交往" : 15 
    "地理常識(shí)" : 10 
    "財(cái)商" : 10
    "安全防護(hù)" : 20 
    "感恩之心" : 10 

其渲染效果如下：

4. 小結(jié)

• Mermaid 為 Markdown 擴(kuò)展了使用普通文本生成餅圖的語(yǔ)法及渲染支持；
• Mermaid 可以用文本描述餅圖中的「標(biāo)題」、「內(nèi)容名稱」、「內(nèi)容權(quán)重」三個(gè)部分。
• Mermaid 的餅圖渲染后內(nèi)容項(xiàng)顏色對(duì)應(yīng)于內(nèi)容項(xiàng)在聲明時(shí)的次序。