甘特图

甘特图是一种条形图，最初由卡罗尔·阿达米茨基于 1896 年开发，并由亨利·甘特在 1910 年代独立开发，它说明了项目时间表以及任何一个项目完成所需的时间。甘特图说明了项目的最终元素和摘要元素的开始日期和完成日期之间的天数。

给用户的注意事项

甘特图将每一项计划任务记录为从左向右延伸的一个连续条。 x 轴代表时间，y 轴记录不同的任务及其完成的顺序。

重要的是要记住，当“排除”特定于任务的日期、日期或日期集合时，甘特图将通过向右延长相同的天数来适应这些更改，而不是在内部创建间隙 任务。 如图所示

 

但是，如果排除的日期位于设置为连续开始的两个任务之间，则排除的日期将以图形方式跳过并留空，并且以下任务将在排除日期结束后开始。如图所示

 

甘特图对于跟踪项目完成之前所需的时间很有用，但它也可以用于以图形方式表示“非工作日”，只需进行一些调整。

JHL 在线编辑可以将甘特图渲染为 SVG、PNG 或可粘贴到文档中的 MarkDown 链接。

gantt
    title A Gantt Diagram
    dateFormat YYYY-MM-DD
    section Section
        A task          :a1, 2014-01-01, 30d
        Another task    :after a1, 20d
    section Another
        Task in Another :2014-01-12, 12d
        another task    :24d

语法

gantt
    dateFormat  YYYY-MM-DD
    title       Adding GANTT diagram functionality to mermaid
    excludes    weekends
    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)

    section A section
    Completed task            :done,    des1, 2014-01-06,2014-01-08
    Active task               :active,  des2, 2014-01-09, 3d
    Future task               :         des3, after des2, 5d
    Future task2              :         des4, after des3, 5d

    section Critical tasks
    Completed task in the critical line :crit, done, 2014-01-06,24h
    Implement parser and jison          :crit, done, after des1, 2d
    Create tests for parser             :crit, active, 3d
    Future task in critical line        :crit, 5d
    Create tests for renderer           :2d
    Add to mermaid                      :1d
    Functionality added                 :milestone, 2014-01-25, 0d

    section Documentation
    Describe gantt syntax               :active, a1, after des1, 3d
    Add gantt diagram to demo page      :after a1  , 20h
    Add another diagram to demo page    :doc1, after a1  , 48h

    section Last section
    Describe gantt syntax               :after doc1, 3d
    Add gantt diagram to demo page      :20h
    Add another diagram to demo page    :48h

可以设置多个以空格分隔的依赖项：

代码：

gantt
    apple :a, 2017-07-20, 1w
    banana :crit, b, 2017-07-23, 1d
    cherry :active, c, after b a, 1d

标题

标题是一个可选字符串，显示在甘特图的顶部，用于描述整个图表。

章节陈述

您可以将图表划分为各个部分，例如将项目的不同部分（例如开发和文档）分开。

为此，请以section关键字开始一行并为其命名。 （请注意，与整个图表的标题不同，此名称是必需的。

里程碑

您可以将里程碑添加到图表中。 里程碑与任务不同，因为它们代表单个时刻并由关键字里程碑标识。 以下是有关如何使用里程碑的示例。 您可能会注意到，里程碑的确切位置由里程碑的初始日期和任务的“持续时间”确定，如下所示：初始日期+持续时间/2。

代码：

gantt
    dateFormat HH:mm
    axisFormat %H:%M
    Initial milestone : milestone, m1, 17:49, 2m
    Task A : 10m
    Task B : 5m
    Final milestone : milestone, m2, 18:08, 4m

设置日期

dateFormat 定义甘特图元素的日期输入的格式。 这些日期如何在渲染的图表输出中表示由 axisFormat 定义。

输入日期格式

默认输入日期格式为 YYYY-MM-DD。 您可以定义自定义日期格式。

dateFormat YYYY-MM-DD

支持以下格式设置选项：

输入	例	描述
YYYY	2014	4 位数字年份
YY	14	2 位数字年份
Q	1..4	一年的季度。将季度的月份设置为第一个月。
M MM	1..12	月份编号
MMM MMMM	January..Dec	由 dayjs.locale（） 设置的语言环境中的月份名称
D DD	1..31	月中的某天
Do	1st..31st	带序数的月份中的某天
DDD DDDD	1..365	一年中的某一天
X	1410715640.579	Unix 时间戳
x	1410715640579	Unix ms 时间戳
H HH	0..23	24小时制
h hh	1..12	与 A 一起使用的 12 小时时间。
a A	am pm	后或前子午线
m mm	0..59	分
s ss	0..59	秒
S	0..9	十分之一秒
SS	0..99	数百秒
SSS	0..999	千分之一秒
Z ZZ	+12:00	从 UTC 偏移为 +-HH：mm、+-HHmm 或 Z

更多信息：https://day.js.org/docs/en/parse/string-format/

轴上的输出日期格式
默认输出日期格式为 YYYY-MM-DD。您可以定义自定义 axisFormat，例如 2020 年第一季度的 2020-Q1。

axisFormat %Y-%m-%d

支持以下格式字符串：

格式	定义
%a	工作日名称的缩写
%A	工作日全名
%b	缩写月份名称
%B	全月名称
%c	日期和时间，如“%a %b %e %H：%M：%S %Y”
%d	以十进制数字形式填充月份中的零日[01，31]
%e	以十进制数形式填充的月份日期 [ 1，31];相当于 %_d
%H	小时（24 小时制）作为十进制数 [00，23]
%I	小时（12 小时制）作为十进制数 [01，12]
%j	以十进制数表示的日期 [001，366]
%m	月份作为十进制数 [01，12]
%M	分钟作为十进制数 [00，59]
%L	毫秒作为十进制数 [000， 999]
%p	上午或下午
%S	秒作为十进制数 [00，61]
%U	一年中的周数（星期日作为一周的第一天）作为十进制数 [00，53]
%w	工作日作为十进制数 [0（星期日），6]
%W	一年中的周数（星期一作为一周的第一天）作为十进制数 [00，53]
%x	日期，作为“%m/%d/%Y”
%X	时间，作为“%H：%M：%S”
%y	不带世纪作为十进制数的年份 [00，99]
%Y	以世纪作为十进制数的年份
%Z	时区偏移量，例如“-0700”
%%	文字“%”字符

更多信息：https://github.com/d3/d3-time-format/tree/v4.0.0#locale_format

轴刻度

默认输出刻度是自动的。您可以自定义您的刻度间隔，例如 1 天或 1 周。

tickInterval 1day

 模式为：

/^([1-9][0-9]*)(minute|hour|day|week|month)$/;

 更多信息:https://github.com/d3/d3-time#interval_every

基于周的刻度间隔默认从星期日开始一周。如果您希望指定 tickInterval 应开始的另一个工作日，请使用工作日选项：

代码：

gantt
  tickInterval 1week
  weekday monday

紧凑模式下的输出

紧凑模式允许您在同一行中显示多个任务。可以通过前面的 YAML 设置设置图形的显示模式，为甘特图启用紧凑模式。

代码：

---
displayMode: compact
---
gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD

    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :a2, 2014-01-20, 25d
    Another one      :a3, 2014-02-10, 20d

注释

注释可以在甘特图中输入，解析器将忽略该图。注释需要位于其自己的行中，并且必须以 %%（双百分号）开头。注释开始到下一个换行符之后的任何文本都将被视为注释，包括任何关系图语法。

代码：

gantt
    title A Gantt Diagram
    %% This is a comment
    dateFormat YYYY-MM-DD
    section Section
        A task          :a1, 2014-01-01, 30d
        Another task    :after a1, 20d
    section Another
        Task in Another :2014-01-12, 12d
        another task    :24d