4-4 加入Chart API

Google Chart Plug-in

plugin:gchart

  • plugin運用Google Image Chart API，但此API荒廢幾年後終於在2024年停止運行。
    • plugin作者改用Open Source的QuickChart.io，因此有些圖表的顯示與之前有不同。
  • pie3d 2) pie2d 3) line 4) sparkline 5) hbar 6) vbar 7) qr 8)

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的一對多

flowchart TD B(Go shopping) -->|One| D[Laptop] B -->|One| E C(Let me think) -->|Two| E[iPhone] C -->|Three| F[fa:fa-car Car]

1)
Dokuwiki主程式為了維護其完整性，透過外掛Plugins與模板Templates兩大類作為拓展功能用的Extensions，使用上依功能需要與喜愛的外觀來選擇，但須注意版本的相容性及延伸性。
2)
3D pie graph
3)
2D pie graph
4)
line graph
5)
“sparkline” graph
6)
horizontal bar graph
7)
vertical bar graph
8)
two-dimensional barcode