playground:pg4_chart

4-4 加入Chart API

Google Chart Plug-in

plugin:gchart

plugin運用Google Image Chart API，但此API荒廢幾年後終於在2024年停止運行。
- plugin作者改用Open Source的QuickChart.io，因此有些圖表的顯示與之前有不同。
pie3d ²⁾ pie2d ³⁾ line ⁴⁾ sparkline ⁵⁾ hbar ⁶⁾ vbar ⁷⁾ qr ⁸⁾

Mermaid Plugin

plugin:mermaid

類似Google Chart都是屬於應用API的plugin
可以畫的圖形類別，有甘特圖、ER圖、Mind思緒圖…以及基本的flowchart流程圖
用Javascript來產生圖案，圖案中的文字可選取，而不是點陣圖輸出
設定: ESM或CJS模組
- ESM與CommonJS (CJS) 的差異在於模組加載和導出的方式。
- ESM 使用靜態加載，CJS 使用動態加載，並且ESM 支援預設導出。
- CJS 較為古老，主要用於Node.js，而ESM 則更為現代，適用於瀏覽器和新版的Node.js 環境。

test 1

graph TB day1 --> day2 subgraph day1 direction LR P1((中興林場)) --> P2(((大坑農場))) --> P3((虎頭埤)) end subgraph day2 direction RL P4((烏骨雞)) --> P5((茄冬雞)) end

mindmap

雖然dokuwiki本身俱系統性，寫作時筆者主觀的想法不一定為讀者所理解，此時輔以Mind Graph圖表，應該可以讓放置在各namespace或文字分段分頁與wiki系統間取得平衡。
mindmap為一對多，所以內碼有root，佛法說“一念不覺生三細境界為緣長六粗”—大乘起信論，也可以說明mindmap只一對多非多對多關係。

mindmap root((台南與我)) 37分區區公所fb Theme主題 Tour旅遊 Spot地點 Biz在地企業 market市場 Marketplace商圈 Eats飲食 Footer設計 Where’s找台南 Farmer農產 Blossom賞花 English單字台南 Temple眾神之都 Tao道教廟宇 Church教會 Buddism佛法 Biz在地企業 Geog自然地理 People名人堂 Culture文化 Museum博物館 Hobby興趣

有所不能:mindmap順序

如下圖四個區的順序若要正確對地理位置，即便不論中文字編碼也無法自行控制mindmap對應的順序。 #下圖是剛好能正確對應的案例

mindmap root((下營區)) 1六甲區 2麻豆區 3學甲區 4新營區

mindmap root((新化)) 關廟新市歸仁左鎮永康山上龍崎

flowchart

flowchart可以表現多對多 cf. mindmap的一對多

¹⁾

Dokuwiki主程式為了維護其完整性，透過外掛Plugins與模板Templates兩大類作為拓展功能用的Extensions，使用上依功能需要與喜愛的外觀來選擇，但須注意版本的相容性及延伸性。

²⁾

3D pie graph

³⁾

2D pie graph

⁴⁾

line graph

⁵⁾

“sparkline” graph

⁶⁾

horizontal bar graph

⁷⁾

vertical bar graph

⁸⁾

two-dimensional barcode