[點晴永久免費OA]WEB瀏覽器中用mermaid.js純JS畫甘特圖
當前位置:點晴教程→點晴OA辦公管理信息系統
→『 經驗分享&問題答疑 』
今天簡單總結一下 mermaid 的甘特圖(gantt chart)語法, 因為昨天感覺mermaid 官網的 gantt 文檔[1] 只給了幾個例子 不太適合上手. mermaid.jsmermaid.js[2]是一個用來在網頁中生成圖表的庫. 使用簡單的語法來描述圖表, 通過 Javascript 渲染. 支持生成多種類型的圖表, 例如流程圖/時序圖/甘特圖等等. “ 它的理念和 markdown/graphviz 一樣, 用代碼代替富文本(word/powerpoint/畫圖工具), 這樣做的好處有:
之前我試過 mermaid 的流程圖(flow chart), 感覺不如 graphviz 靈活(雖然語法更簡潔). 但是 mermaid 被許多 markdown 編輯器支持, 而且覆蓋了很多類型的圖表, 所以相當值得一試. 有幾個方式可以使用 mermaid:
甘特圖“ => 用來做時間線圖表剛剛好 mermaid 甘特圖語法Mermaid.js 使用類似于 markdown 的語法來生成 Gantt 圖. 可以劃分不同章節, 每個章節包含若干任務信息. 關鍵字有:
描述任務起止時間"任務" 在這里指一項事件或者工程, 表現為甘特圖中的一條. mermaid 每一行內容作為一個任務(或者事件)的描述, 大概語法為: “ 描述任務的開始和截止時間, 既可以都用實際的時間( 雖然下面的例子都是以日期為單位, 其實它也支持小時/分鐘的時間段, 比如可以用甘特圖畫一天的工作日志. 修飾符(modifier)描述任務除了給出開始/結束的時間外, 還可以進行修飾修改其顯示效果. 任務修飾符:
任務依賴關系由于甘特圖用于展示項目進度和任務分配, 對任務之間的依賴關系也有支持. 以房地產開發為例, 幾個環節(拿地/設計/施工/裝修/宣傳/銷售)的依賴關系可以這樣搞定: 完整示例代碼
參考資料mermaid官網的gantt文檔: https://mermaid.js.org/syntax/gantt.html mermaid.js: https://mermaid.js.org/ mermaid.js官方在線編輯器: https://mermaid.live/ obsidian: https://obsidian.md/ VSCode編輯器: https://code.visualstudio.com/ mermaid VSCode插件: https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid 該文章在 2023/4/15 10:45:24 編輯過 |
關鍵字查詢
相關文章
正在查詢... |