playground:pg4_chart_api [Tainanese台南與我]

本頁是唯讀的，您可以看到原始碼，但不能更動它。您如果覺得它不應被鎖上，請詢問管理員。
~~NOTOC~~
===== 4-4 加入Chart API====
  * [[wiki:dokuwiki|DokuWiki]]與語法[[wiki:syntax|Syntax]]{{fa>flask&align=right}}
  * 展示本站使用到的[[https://www.dokuwiki.org/plugins|Dokuwiki Plugins]]((Dokuwiki主程式為了維護其完整性，透過外掛Plugins與[[https://www.dokuwiki.org/template|模板Templates]]兩大類作為拓展功能用的Extensions，使用上依功能需要與喜愛的外觀來選擇，但須注意版本的相容性及延伸性。))

==== Google Chart Plug-in====
[[https://www.dokuwiki.org/plugin:gchart|plugin:gchart]]
  * plugin運用Google Image Chart API，但此API荒廢幾年後終於在2024年停止運行。
    * plugin作者改用Open Source的[[https://quickchart.io/|QuickChart.io]]，因此有些圖表的顯示與之前有不同。
  * pie3d ((3D pie graph))  pie2d ((2D pie graph)) line ((line graph)) sparkline ((“sparkline” graph)) hbar ((horizontal bar graph)) vbar ((vertical bar graph)) qr ((two-dimensional barcode))
<gchart 350x120 vbar #0000ff #ffffff right>
Apples       = 3
Peaches      = 23
Strawberries = 25
Peanuts      = 7
</gchart>
<gchart qr 120x120>
L
https://www.tainan.com.tw/
</gchart>
<WRAP clear/>

==== Mermaid Plugin====
[[https://www.dokuwiki.org/plugin:mermaid|plugin:mermaid]]
  * 類似Google Chart都是屬於應用API的plugin
  * 可以畫的圖形類別，有甘特圖、ER圖、Mind思緒圖...以及基本的flowchart流程圖
  * 用Javascript來產生圖案，圖案中的文字可選取，而不是點陣圖輸出

====test 1====
<mermaid>
  raw
  graph TB
day1 --> day2
  subgraph day1
  direction LR
  P1((中興林場)) --> P2(((大坑農場))) --> P3((虎頭埤))
  end

  subgraph day2
  direction RL
  P4((烏骨雞)) --> P5((茄冬雞)) 
  end
  
</mermaid>

====mindmap====
<WRAP round tip 500px>
雖然dokuwiki本身俱系統性，寫作時筆者主觀的想法不一定為讀者所理解，此時輔以Mind Graph圖表，應該可以讓放置在各namespace或文字分段分頁與wiki系統間取得平衡。
</WRAP>
 <mermaid>
    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興趣
  </mermaid>


====flowchart ====
<wrap tip>flowchart可以表現多對多 cf. mindmap的一對多</wrap>
<mermaid>
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]
    </mermaid>
[<10>]
網站工具

頁面工具
