亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

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