甘特图绘制模板及使用说明

wzg2016

已于 2024-04-09 15:58:55 修改

阅读量568

点赞数 11

文章标签： markdown 甘特图

于 2024-02-17 18:47:47 首次发布

本文链接：https://blog.csdn.net/Strive_For_Future/article/details/136140825

版权

甘特图绘制模板及使用说明

---
displayMode: compact
---
gantt
    title 项目总体进度
    todayMarker on
    %% axisFormat %Y-%m
    dateFormat YY-M-DD
    axisFormat %m/%d
    tickInterval 1week         %% 时间线间隔
    %% weekday monday
    %% tickInterval 1day
    %% excludes    weekends
    
    section 任务1
    子任务1.1      :       done,     a1,       2024-02-07,      20d
    section 任务2
    子任务2.1      :       done,     task1,    2024-02-12,      7d
    子任务2.2      : crit, done,     task2,    2024-02-19,      7d
    子任务2.3      : crit, active,   task3,    after task2,     7d
    子任务2.4      :       active,   task4,    after task3,     7d
    %% 子任务2.4      : milestone, active,   task4,    after task3,     7d
    
    section 任务3
    子任务3.1      :       active, 2024-02-07, 7d
    %% 子任务1      : milestone,   active, 2024-02-20, 7d

效果：

gantt图的语法教程

http://mermaid.js.org/syntax/gantt.html

gantt图绘制语法介绍

gatt语法分为以下几个部分

1. gantt

开头标志，表明这是一张甘特图

2. title

甘特图的标题，我们的例子中，标题是项目总体进度

3. section

每个活动或者任务的标题，后面的每一行都是一个子任务，每个子任务的描述以:符号作为开始符。

子任务后面 name是这个任务的标签，主要是锚点的作用，其他子任务如果在这个子任务后面，只要标记为after name就可以了。name后面跟着日期，代表这个任务的开始时间，后面跟着20d，代表任务的持续时间

name任务标签也可以没有，后面的任务默认追加到之前的任务后面。

4. 任务状态标签

done 代表这个任务已经完成
active 代表这个任务正在进行中
不加以上标签，代表它是未来的任务
crit 代表重要任务，用来突出展示某个任务，这个任务会使用红框标记

5. 今日展示线

图中竖向的红线就是展示今天的线条，可以通过todayMarker off进行关闭，这一行写在title下面就可以了

6.横轴日期定制

如果要定制横轴的日期展示格式，可以使用axisFormat字段，默认为axisFormat %Y-%m-%d，展示的日期格式为2021-01-01。

如果改成axisFormat %Y/%m，展示的格式为2021/01

7. 基本语法–对每个任务的描述

任务名   : 参数一,       参数二,            参数三,    参数四，                   参数五
taskName: critic/NULL, done/active/NULL, 任务别名， 开始时间（绝对时间/相对时间），结束时间（绝对时间/相对时间/持续时长）