甘特图
甘特图是一种条形图，最初由 Karol Adamiecki 于 1896 年开发，并由 Henry Gantt 在 1910 年代独立开发，它说明了项目进度和任何一个项目完成所需的时间。甘特图说明项目的终端元素和摘要元素的开始日期和结束日期之间的天数。
给用户的说明
甘特图将每个计划任务记录为一个从左向右延伸的连续条形图。x 轴代表时间，y 轴记录不同的任务及其完成的顺序。
重要的是要记住，当特定于任务的日期、日期或日期集合被“排除”时，甘特图将通过向右延伸相等的天数来适应这些变化，而不是通过在内部创建间隙任务。
但是，如果排除的日期在设置为连续开始的两个任务之间，则排除的日期将以图形方式跳过并留空，并且以下任务将在排除的日期结束后开始。
甘特图可用于跟踪项目完成之前所需的时间，但它也可用于以图形方式表示“非工作日”，只需进行一些调整。
Code Chart 可以将甘特图呈现为 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 sec :2014-01-12 , 12d
another task : 24d句法
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to Code Chart
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 Code Chart :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标题
这title是一个可选的字符串，显示在甘特图的顶部，用于描述整个图表。
部分语句
您可以将图表分成不同的部分，例如将项目的不同部分（如开发和文档）分开。
为此，请以section关键字开始一行并为其命名。（请注意，与整个图表的标题不同，此名称是必需的。
里程碑
您可以将里程碑添加到图表中。里程碑与任务不同，因为它们代表一个单一的时间瞬间并由关键字标识milestone。以下是有关如何使用里程碑的示例。您可能会注意到，里程碑的确切位置是由里程碑的初始日期和任务的“持续时间”决定的：初始日期+持续时间/2。
gantt dateFormat HH:mm axisFormat %H:%M Initial milestone : milestone, m1, 17:49,2min taska2 : 10min taska3 : 5min Final milestone : milestone, m2, 18:14, 2min
设置日期
dateFormat定义甘特图元素的日期输入格式。这些日期在呈现的图表输出中的表示方式由 定义axisFormat。
输入日期格式
默认输入日期格式为YYYY-MM-DD. 您可以定义您的自定义dateFormat.
dateFormat YYYY-MM-DD支持以下格式选项：
Input Example Description:
YYYY 2014 4 digit year
YY 14 2 digit year
Q 1..4 Quarter of year. Sets month to first month in quarter.
M MM 1..12 Month number
MMM MMMM January..Dec Month name in locale set by moment.locale()
D DD 1..31 Day of month
Do 1st..31st Day of month with ordinal
DDD DDDD 1..365 Day of year
X 1410715640.579 Unix timestamp
x 1410715640579 Unix ms timestamp
H HH 0..23 24 hour time
h hh 1..12 12 hour time used with a A.
a A am pm Post or ante meridiem
m mm 0..59 Minutes
s ss 0..59 Seconds
S 0..9 Tenths of a second
SS 0..99 Hundreds of a second
SSS 0..999 Thousandths of a second
Z ZZ +12:00 Offset from UTC as +-HH:mm, +-HHmm, or Z轴上的输出日期格式
默认输出日期格式为 YYYY-MM-DD。您可以定义自定义axisFormat，例如2020-Q12020 年第一季度。
axisFormat %Y-%m-%d支持以下格式字符串：
%a - abbreviated weekday name.
%A - full weekday name.
%b - abbreviated month name.
%B - full month name.
%c - date and time, as "%a %b %e %H:%M:%S %Y".
%d - zero-padded day of the month as a decimal number [01,31].
%e - space-padded day of the month as a decimal number [ 1,31]; equivalent to %_d.
%H - hour (24-hour clock) as a decimal number [00,23].
%I - hour (12-hour clock) as a decimal number [01,12].
%j - day of the year as a decimal number [001,366].
%m - month as a decimal number [01,12].
%M - minute as a decimal number [00,59].
%L - milliseconds as a decimal number [000, 999].
%p - either AM or PM.
%S - second as a decimal number [00,61].
%U - week number of the year (Sunday as the first day of the week) as a decimal number [00,53].
%w - weekday as a decimal number [0(Sunday),6].
%W - week number of the year (Monday as the first day of the week) as a decimal number [00,53].
%x - date, as "%m/%d/%Y".
%X - time, as "%H:%M:%S".
%y - year without century as a decimal number [00,99].
%Y - year with century as a decimal number.
%Z - time zone offset, such as "-0700".
%% - a literal "%" character.注释
可以在甘特图中输入注释，解析器将忽略这些注释。注释需要单独一行，并且必须以%%（双百分号）开头。注释开始后到下一个换行符的任何文本都将被视为注释，包括任何图表语法
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 sec :2014-01-12 , 12d
another task : 24d
造型
甘特图的样式是通过定义一些 css 类来完成的。在渲染期间，这些类是从位于 src/themes/gantt.scss 的文件中提取的
使用的类
| Class | 描述 |
|---|---|
| grid.tick | 网格线的样式 |
| grid.path | 网格边界的样式 |
| .taskText | 任务文本样式 |
| .taskTextOutsideRight | 右侧超出活动栏的任务文本样式。 |
| .taskTextOutsideLeft | 超出活动栏的任务文本样式，朝向左侧。 |
| todayMarker | “今日标记”的切换和样式设置 |
示例样式表
.grid .tick {
stroke: lightgrey;
opacity: 0.3;
shape-rendering: crispEdges;
}
.grid path {
stroke-width: 0;
}
#tag {
color: white;
background: #FA283D;
width: 150px;
position: absolute;
display: none;
padding:3px 6px;
margin-left: -80px;
font-size: 11px;
}
#tag:before {
border: solid transparent;
content: ' ';
height: 0;
left: 50%;
margin-left: -5px;
position: absolute;
width: 0;
border-width: 10px;
border-bottom-color: #FA283D;
top: -20px;
}
.taskText {
fill:white;
text-anchor:middle;
}
.taskTextOutsideRight {
fill:black;
text-anchor:start;
}
.taskTextOutsideLeft {
fill:black;
text-anchor:end;
}今天标记
您可以设置或隐藏当前日期的标记。todayMarker要设置它的样式，请为键添加一个值。
todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5要隐藏标记，设置todayMarker为off。
todayMarker off配置
可以调整渲染甘特图的边距。
这是通过定义ganttConfig配置对象的一部分来完成的。
mermaid.ganttConfig = {
titleTopMargin:25,
barHeight:20,
barGap:4,
topPadding:75,
sidePadding:75
}可能的配置参数：
| 参数 | 描述 | 默认值 |
|---|---|---|
| mirrorActor | 打开/关闭图表下方和上方的演员渲染 | false |
| bottomMarginAdj | 调整图表结束的距离。带有 css 的宽边框样式可能会产生不需要的剪辑，这就是此配置参数存在的原因。 | 1 |
相互作用
可以将单击事件绑定到任务。单击可以导致 javascript 回调或将在当前浏览器选项卡中打开的链接。注意：此功能在使用时禁用，在使用时securityLevel='strict'启用securityLevel='loose'。
click taskId call callback(arguments)
click taskId href URL- taskId 是任务的id
- callback 是在显示图形的页面上定义的 javascript 函数的名称，如果没有指定其他参数，将使用 taskId 作为参数调用该函数。
初学者提示——在 html 上下文中使用交互式链接的完整示例：
<body>
<div class="mermaid">
gantt
dateFormat YYYY-MM-DD
section Clickable
Visit mermaidjs :active, cl1, 2014-01-07, 3d
Print arguments :cl2, after cl1, 3d
Print task :cl3, after cl2, 3d
click cl1 href "https://mermaidjs.github.io/"
click cl2 call printArguments("test1", "test2", test3)
click cl3 call printTask()
</div>
<script>
var printArguments = function(arg1, arg2, arg3) {
alert('printArguments called with arguments: ' + arg1 + ', ' + arg2 + ', ' + arg3);
}
var printTask = function(taskId) {
alert('taskId: ' + taskId);
}
var config = {
startOnLoad:true,
securityLevel:'loose',
};
mermaid.initialize(config);
</script>
</body>