Markdown 语法详解大全(超级版)（三）——甘特图语法详解

已于 2024-10-06 11:58:20 修改
阅读量791 收藏 6
点赞数 10
分类专栏： # 前端基础知识详解 Tools工具类 前端技术和特效 文章标签： 甘特图 Markdown
于 2024-10-05 21:28:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_69553582/article/details/142719257
版权

Markdown 语法详解大全(超级版)（三）——甘特图语法详解

Markdown 语法详解大全(超级版)（一）
Markdown 语法详解大全(超级版)（二）
Markdown 语法详解大全(超级版)（三）
Markdown 语法详解大全(超级版)（四）
Markdown 语法详解大全(超级版)（五）
Markdown 语法详解大全(超级版)（六）

一、甘特图简介

在这里插入图片描述

Gantt图（甘特图）是一种用于图形化展示项目计划和进度的工具。
　　它由 Karol Adamiecki 于 1896 年首次开发，并由美国工程师 Henry Gantt 在 1910 年代独立开发，它说明了项目时间表以及完成任何一个项目所需的时间。
　　甘特图是一种条形图，将每个计划任务记录为一个从左向右延伸的连续条形。甘特图说明了项目的终端元素和摘要元素的开始日期和完成日期之间的天数。
　　Gantt图通过横轴x 轴表示时间，纵轴y 轴表示任务或活动，并使用水平条形图来展示任务的起始时间、结束时间和持续时间，记录不同的任务及其完成顺序。
　　每个任务的条形图在时间轴上进行排列，可以清楚地展示出任务之间的先后关系、任务的持续时间以及整个项目的进度。
　　Gantt图还可以显示任务的依赖关系、资源分配和里程碑等信息，帮助项目管理人员进行项目计划的安排和跟踪。
　　

二、Gantt图特点

Gantt图是一种用于项目管理的工具，它以条形图的形式展示项目的时间计划和进度。Gantt图是一种直观、可视化的工具，可以帮助项目管理人员有效规划和管理项目，提高项目的执行效率和成功率。
　　Gantt图具有以下特点：

    1. 可视化：
      Gantt图以直观的方式展示项目的时间轴和任务的排列顺序，使项目计划和进度一目了然。
    1. 时间管理：
      Gantt图可以帮助项目管理人员合理安排项目的时间，确保任务按照预定计划顺利进行。
    1. 任务分配：
      Gantt图可以清楚地显示每个任务分配给哪个人或团队，以及任务的优先级和相互依赖关系。
    1. 进度跟踪：
      通过更新Gantt图，可以及时了解项目进展情况，识别延迟或问题，并及时采取措施进行调整。
    1. 交流和协作：
      Gantt图可以作为项目计划和进度的共享工具，方便团队成员之间的交流和协作，确保大家都了解和参与项目进展。
    1. 可调整性：
      Gantt图可以根据需要进行调整和修改，以适应项目计划或进度的变化。

三、实例解释甘特图语法

我们先来看一下Markdown甘特图的样子

3.1、例子

下面是两个完整的 Markdown 语法的例子，演示了如何使用 Gantt 图表来显示项目的时间计划和里程碑

（1）、项目时间计划

gantt
    dateFormat  YYYY-MM-DD
    title  2023项目时间计划
    section  项目策划
    计划阶段             :a1, 2023-01-01, 30d
    section  项目开发
    开发阶段             :a2, after a1, 60d
    section  测试阶段
    测试阶段             :a3, after a2, 30d
    section  上线发布
    发布阶段             :a4, after a3, 14d
    section  项目完成
    项目完成             :a5, after a4, 0d

实例渲染效果如下：

2023-01-01 2023-01-08 2023-01-15 2023-01-22 2023-01-29 2023-02-05 2023-02-12 2023-02-19 2023-02-26 2023-03-05 2023-03-12 2023-03-19 2023-03-26 2023-04-02 2023-04-09 2023-04-16 2023-04-23 2023-04-30 2023-05-07 2023-05-14 计划阶段 开发阶段 测试阶段 发布阶段 项目完成 项目策划 项目开发 测试阶段 上线发布 项目完成 2023项目时间计划

　　这是一个简单的 Gantt 图表示例，它显示了一个项目的时间计划。 　　图表使用 `mermaid` 语法来生成，其中 `dateFormat` 用于指定日期的格式，`title` 用于设置图表的标题，`section` 用于定义图表的不同部分，而任务则使用 `:a1` 的形式指定，并指定任务的开始日期和持续时间。

在上述示例中，项目时间计划被分为四个阶段：策划、开发、测试和发布。每个阶段都有相应的任务，例如计划阶段、开发阶段等。任务之间使用 after 关键字来指定它们的顺序。

使用 Markdown 的 Gantt 图表可以帮助团队和项目经理更好地理解项目的时间计划，并与团队成员共享项目的进度和里程碑。
　　

（2）、项目进度表

gantt
dateFormat  YYYY-MM-DD
title 2022年项目进度表

section 项目计划
需求分析  :done,    des1, 2022-01-01,2022-01-05
设计阶段  :done,  des2, 2022-01-06,2022-01-10
开发阶段  :active,  des3, 2022-01-11,2022-01-20
测试阶段  :         des4, 2022-01-21,2022-01-25
部署上线  :         des5, 2022-01-26,2022-01-30

section 里程碑
需求分析完成:done,    done, 2022-01-05
设计阶段完成:done,  done, 2022-01-10
开发阶段完成:done,  done, 2022-01-20
测试阶段完成:done,  done, 2022-01-25
部署上线完成:active,  active, 2022-01-30

实例渲染效果如下：

2022-01-01 2022-01-03 2022-01-05 2022-01-07 2022-01-09 2022-01-11 2022-01-13 2022-01-15 2022-01-17 2022-01-19 2022-01-21 2022-01-23 2022-01-25 2022-01-27 2022-01-29 需求分析 设计阶段完成 设计阶段 开发阶段完成 开发阶段 测试阶段完成 测试阶段 部署上线完成 部署上线 需求分析完成 项目计划 里程碑 2022年项目进度表

　　该例子展示了一个项目进度表，包括项目计划和里程碑两个部分。

在项目计划部分，分别列出了需求分析、设计阶段、开发阶段、测试阶段和部署上线这几个任务，使用冒号后面的符号来表示任务的状态（例如done表示已完成，active表示正在进行）。然后给出了每个任务的开始日期和结束日期。在里程碑部分，列出了每个阶段的完成情况。
　　以上代码可以在Markdown编辑器中直接使用，并生成一个漂亮的Gantt图展示项目进度。


3.2、Markdown甘特图语法

甘特图的Markdown语法代码：

  • ```mermaid甘特图内容```

3.3、甘特图语法实例详解

3.3.1、实例1_任务完成状况

实例渲染效果如下：

2024-01-06 2024-01-06 2024-01-07 2024-01-07 2024-01-08 2024-01-08 2024-01-09 2024-01-09 2024-01-10 已完成 进行中 计划中 现有任务 任务完成状况

代码实现过程：

图表使用 mermaid 语法来生成，
（1）、第一行：gantt

gantt

指明这是个Markdown gantt甘特图

（2）、第二行： dateFormat YYYY-MM-DD

dateFormat  YYYY-MM-DD

dateFormat 用于指定日期的格式，​ 此例中，YYYY表示的是年，MM表示的月，DD表示是日。YYYY-MM-DD：4位数字年份-2位数字月份数-2位数字日期

（3）、第三行： title 任务完成状况

title 任务完成状况

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

（4）、第四行：section <区块名>

        section 现有任务
        已完成               :done,    des1, 2024-01-06,2024-01-08
        进行中               :active,  des2, 2024-01-07, 2d
        计划中               :         des3, after des2, 1d

区块语句
您可以将甘特图分成不同的部分，例如分离项目的不同部分，例如开发和文档编写。
请以section关键字开头并为其命名。
section 用于定义图表的不同部分，注意 与整个图表的标题不同，此名称是必需的。
而任务则使用 :a1 的形式指定，并指定任务的开始日期和持续时间。
done表示该工作已完成.
active表示该工作正激活，处于正在进行中.

（5）代码

gantt
        dateFormat  YYYY-MM-DD
        title 任务完成状况
        section 现有任务
        已完成               :done,    des1, 2024-01-06,2024-01-08
        进行中               :active,  des2, 2024-01-07, 2d
        计划中               :         des3, after des2, 1d

3.3.2、实例2_里程碑

里程碑实际上是事物历史或发展中的重要或重大事件。 因此，项目里程碑是在项目生命周期中发生的重要或重大事件。

项目里程碑也可以表明项目阶段的完成。 项目里程碑（重大事件或已完成阶段）可以在项目开始、期间或结束时。

项目里程碑是帮助您了解项目是否正在进行中的标记。 正如公路上的里程标记可以帮助汽车司机了解他们现在在哪里以及他们必须走多远，项目里程碑可以帮助项目经理了解项目的进展情况。

因此，项目里程碑是有效的调度工具。

您可以向图表中添加里程碑。里程碑与任务不同，因为它们表示单个时刻，并由关键字 标识 。
　　里程碑的确切位置由里程碑的初始日期和任务的“持续时间”确定，因此：初始日期 + 持续时间/2。
　　
实例渲染效果如下：

17:50 17:55 18:00 18:05 18:10 初始里程碑 任务 A 任务 B 最终里程碑 项目里程碑

代码实现过程：

图表使用 mermaid 语法来生成，

（1）、第一行：gantt

gantt

指明这是个Markdown gantt甘特图

（2）、第二行： dateFormat HH:mm

dateFormat HH:mm

dateFormat 用于指定日期的格式，HH:mm 声明是24 小时制

（3）、第三行： title 项目里程碑

title 项目里程碑

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

（4）、第四行：axisFormat %H:%M

axisFormat %H:%M

axisFormat关键字用以指定时间轴的单位格式，默认的时间格式是YYYY-MM-DD.
用axisFormat关键字来指定时间单位格式时，每一个组合都是由一个%引导，
%H 24小时制十进制数表示小时
%M 十进制表示分钟[00, 59]

里程碑的确切位置由里程碑的初始日期和任务的“持续时间”确定，因此：初始日期 + 持续时间/2。

（5）、第五行： 初始里程碑 : milestone, m1, 17:49, 2m

初始里程碑 : milestone, m1, 17:49, 2m

确定初始里程碑的位置。里程碑与任务不同，因为它们代表时间上的单一瞬间，并由关键字milestone标识。以下是如何使用里程碑的示例。正如您所注意到的那样，里程碑的确切位置由起始日期和该任务的“持续时间”决定：初始日期+持续时间/2。

（6）、第六行：描述各个任务的数据

    任务 A : 12m
    任务 B : 5m

（7）、第七行： 最终里程碑: milestone, m2, 18:08, 4m

最终里程碑: milestone, m2, 18:08, 4m

确定最终里程碑的位置

（8）、代码

gantt
    dateFormat HH:mm
    title 项目里程碑
    axisFormat %H:%M
    初始里程碑 : milestone, m1, 17:49, 2m
    任务 A : 12m
    任务 B : 5m
    最终里程碑: milestone, m2, 18:08, 4m

四、相关语法参数

4.1、元数据语法

默认情况下，任务是按顺序执行的。
任务开始日期默认为前一个任务的结束日期。
冒号：将任务标题与其元数据分隔开。
元数据项用逗号、、分隔，。
有效的标签包括活动active、完成 done、临界值crit和里程碑milestone。
标签是可选的，但如果使用，必须先指定。
处理标签后，剩余的元数据项解释如下：
如果指定了单个项目，它将确定任务何时结束。它可以是特定的日期/时间或持续时间。如果指定了持续时间，则将其添加到任务的开始日期中，以确定任务的结束日期，同时考虑到任何排除情况。
如果指定了两个项目，则最后一个项目的解释与前一个情况相同。第一项可以指定明确的开始日期/时间（采用dateFormat指定的格式），也可以在[otherTaskID2之后引用另一个任务[其他任务ID3]]…]。在后一种情况下，任务的开始日期将根据任何引用任务的最新结束日期设置。
如果指定了三个项目，则最后两个项目将被解释为与前一个情况相同。第一项将表示任务的ID，可以使用后面的语法引用它。

元数据语法开始日期结束日期身份证
<taskID>,<startDate>, <endDate>startdate使用dateformatendDate使用dateformattaskID
<taskID>, <startDate>, <length>startdate使用dateformat开课日期 +lengthtaskID
<taskID>, after <otherTaskId>, <endDate>先前指定任务的结束日期otherTaskIDendDate使用dateformattaskID
<taskID>, after <otherTaskId>, <length>先前指定任务的结束日期otherTaskID开课日期 +lengthtaskID
<taskID>, <startDate>, until <otherTaskId>startdate使用dateformat以前指定的任务的开始日期otherTaskIDtaskID
<taskID>, after <otherTaskId>, until <otherTaskId>先前指定任务的结束日期otherTaskID以前指定的任务的开始日期otherTaskIDtaskID
<startDate>, <endDate>startdate使用dateformatenddate使用dateformat不适用
<startDate>, <length>startdate使用dateformat开课日期 +length不适用
after <otherTaskID>, <endDate>先前指定任务的结束日期otherTaskIDenddate使用dateformat不适用
after <otherTaskID>, <length>先前指定任务的结束日期otherTaskID开课日期 +length不适用
<startDate>, until <otherTaskId>startdate使用dateformat以前指定的任务的开始日期otherTaskID不适用
after <otherTaskId>, until <otherTaskId>先前指定任务的结束日期otherTaskID以前指定的任务的开始日期otherTaskID不适用
<endDate>前一个任务的结束日期enddate使用dateformat不适用
<length>前一个任务的结束日期开课日期 +length不适用
until <otherTaskId>前一个任务的结束日期以前指定的任务的开始日期otherTaskID不适用

注意：
在（v10.9.0+）中添加了对关键字until的支持。这可用于定义一个正在运行的任务，直到其他特定任务或里程碑开始。

为简单起见，该表没有显示使用after关键字列出的多个任务。

4.1、标题

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

4.2、设置日期

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

4.2.1、输入的日期格式

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

dateFormat YYYY-MM-DD

支持以下格式选项：

输入例描述
YYYY20144 位数字年份
YY142 位数字年份
Q1…4一年的季度。将 month 设置为 quarter 中的第一个月。
M MM1…12月份数
MMM MMMM一月。。12 月区域设置中的月份名称dayjs.locale()
D DD1…31每月的日期
Do第一。。第 31 名具有序数的月份中的日期
DDD DDDD1…365一年中的某天
X1410715640.579Unix 时间戳
x1410715640579Unix 毫秒 时间戳
H HH0…2324 小时制
h hh1…1212 小时与 a A一起使用.
a Aam pm上午/下午
m mm0…59分钟
s ss0…59秒
S0…9十分之一秒
SS0…99百分之一秒
SSS0…999千分之一秒
Z ZZ+12:00UTC 偏移量，表示为±HH:mm、±HHmm或Z

4.2.2、excludes排除日期

excludes是一个可选属性，接受YYYY-MM-DD格式的特定日期、一周中的几天（“星期日”）或“周末”，但不接受“工作日”一词。这些日期将标记在图表上，并从任务的持续时间计算中排除。这意味着，如果在任务间隔内有排除的日期，则“跳过”的天数将添加到任务的末尾，以确保持续时间符合代码中的指定。

周末（v\11.0.0+）
排除周末时，可以将周末配置为周五和周六或周六和周日。默认情况下，周末为周六和周日。要定义周末开始日，可以在周五或周六之后的新行中添加一个可选属性weekend。

可以用excludes语句排除周末或某指定日期.
例如 excludes weekends 表示排除周末
excludes sunday 表示排除星期六
excludes 2024-6-20 表示排除2024-6-20
但是要注意，没有excludes weekdays.

当“排除”特定于任务的日期、日期或日期集合时，甘特图将通过向右延长相等天数来适应这些更改，而不是通过在任务内创建间隙。
但是，如果排除的日期位于设置为连续开始的两个任务之间，则排除的日期将以图形方式跳过并留空，并且下一个任务将在排除的日期结束后开始。
甘特图可用于跟踪项目完成之前所需的时间，但它也可以用于以图形方式表示“非工作日”，只需进行一些调整。

gantt
        dateFormat  YYYY-MM-DD
        title 不包括周五至周六周末的甘特图
        excludes weekends
        section 现有任务
        任务1               :a1, 2024-01-01, 30d
        任务2               :after a1, 20d

实例渲染效果如下：

2024-01-07 2024-01-14 2024-01-21 2024-01-28 2024-02-04 2024-02-11 2024-02-18 2024-02-25 2024-03-03 2024-03-10 任务1 任务2 现有任务 不包括周五至周六周末的甘特图

4.2.3、轴上的输出日期格式

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

axisFormat %Y-%m-%d

支持以下格式字符串：

格式定义
%a缩写的工作日名称
%A完整的工作日名称
%b缩写月份名称
%B完整的月份名称
%c日期和时间，如 “%A %B %E %H：%M：%S %Y”
%d用2位十进制数字表示月份中的天数，不足的补零[01,31]
%e用2位十进制数字表示月份中的天数，不足的补空格[ 1,31]; 等同于使用 %_d
%H用2位十进制数字表示小时数，hour （24 小时制） [00,23]
%I用2位十进制数字表示小时数，不足的补零（12小时制） [01,12]
%j用3位十进制数字表示年份中的天数，不足的补零 [001,366]
%m用2位十进制数字表示年份中的月数，不足的补零 [01,12]
%M用2位十进制数字表示分钟数，不足的补零 [00,59]
%L用3位十进制数字表示毫秒数，不足的补零 [000, 999]
%pAM 或 PM
%S用2位十进制数字表示秒数，不足的补零 [00,61]
%U用2位十进制数字表示年份中的周数，不足的补零 (星期日作为一周的第一天) [00,53]
%w用十进制数字表示星期几 [0(Sunday),6]
%W用2位十进制数字表示年份中的周数 (星期一作为一周的第一天) [00,53]
%x日期, 以“%m/%d/%Y”的形式
%X时间, 以 “%H:%M:%S”的形式
%y不包括世纪的年份，表示为2位十进制数，不足补零 [00,99]
%Y包括世纪的年份，表示为4位十进制,数，不足补零
%Z时区偏移量，例如 “-0700”
%%文本 “%” 字符,单个百分号 “%”

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

4.3、轴刻度 （v10.3.0+）

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

tickInterval 1day

模式为：

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

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

基于周的tickIntervals默认从周日开始一周。如果要指定tickInterval应开始的另一个工作日，请使用weekday选项：

代码：
gantt
tickInterval 1week
weekday monday

警告
v10.3.0中添加了毫秒和秒支持

4.4、section 区块分割 和 task 任务条

section关键字是用来表示任务的分块的，不同的任务隶属于不同的section. section后同行的内容全部作为该section的区块名称.

​ 一个section下可以并排排入多个同级的task任务. 每一个task对应一个甘特图进度条.
​ 每一个task后，跟进的是状态（可缺省）、任务名（可缺省）、开始时间（或任务位置）、延续时长（或结束时间）.

​ 写成语法格式为：
task显示名 : 状态（可缺省） 任务名（可缺省） 开始时间（或任务位置） 延续时长（或结束时间）
​ 其中，任务名可用作位置标记，比如：

gantt
title 一个甘特图例子
section Sb
任务1 : desA, 2023-6-5, 2d
任务2 : after desA, 3d

实例渲染效果如下：

2023-06-05 2023-06-05 2023-06-06 2023-06-06 2023-06-07 2023-06-07 2023-06-08 2023-06-08 2023-06-09 2023-06-09 2023-06-10 任务1 任务2 Sb 一个甘特图例子 
gantt
title 一个甘特图例子
section Sb
任务A :  2023-2-1, 2d
任务B : 2023-2-6, 2023-2-13

实例渲染效果如下：

2023-02-01 2023-02-02 2023-02-03 2023-02-04 2023-02-05 2023-02-06 2023-02-07 2023-02-08 2023-02-09 2023-02-10 2023-02-11 2023-02-12 2023-02-13 任务A 任务B Sb 一个甘特图例子

4.5、task bar state 进度条状态

task进度条有几种状态：

  • <default>：表示的状态即为缺省下的状态，具体来说，就是已计划但尚未实施.
  • \done：done表示该工作已完成.
  • active：active表示该工作正激活，处于正在进行中.
  • crit：表示该任务为关键任务. crit状态可以与其他状态复用.
gantt
	title 一个甘特图例子
	section sectionA
	taskA: done, 2024-2-4, 1d
	taskB: 2024-2-3, 3d
	taskC: active, 2024-2-6, 4d
	taskD: crit, 2024-2-9, 2d

实例渲染效果如下：

2024-02-03 2024-02-04 2024-02-05 2024-02-06 2024-02-07 2024-02-08 2024-02-09 2024-02-10 2024-02-11 taskB taskA taskC taskD sectionA 一个甘特图例子

4.6、使用紧凑模式显示

紧凑模式允许您在同一行中显示多个任务。通过预先设置YAML设置来设置图表的显示模式，可以为甘特图启用紧凑模式。
注意 只有mermaid v10.2.3+才支持紧凑模式

gantt
    title 一个甘特图
    dateFormat  YYYY-MM-DD

    section Section
    一个任务           :a1, 2014-01-01, 30d
    另一个任务     :a2, 2014-01-20, 25d
    另一个      :a3, 2014-02-10, 20d

实例渲染效果如下：

2014-01-05 2014-01-12 2014-01-19 2014-01-26 2014-02-02 2014-02-09 2014-02-16 2014-02-23 2014-03-02 一个任务 另一个任务 另一个 Section 一个甘特图

4.7、注释

可以在甘特图中输入注释，这些注释将被解析器忽略。
注释必须单独占据一行，并且必须以%%（双百分号）开头。
从注释开始到下一个换行符之间的任何文本都将被视为注释，包括任何图表语法。

gantt
    title 这是一个甘特图示例
    %% 这是一段注释
    dateFormat YYYY-MM-DD
    section 阶段1
        任务1          :a1, 2024-01-01, 30d
        任务2    :after a1, 20d
    section 阶段2
        任务3 :2024-01-12, 12d
        任务4    :24d

实例渲染效果如下：

2024-01-07 2024-01-14 2024-01-21 2024-01-28 2024-02-04 2024-02-11 2024-02-18 任务1 任务3 任务4 任务2 阶段1 阶段2 这是一个甘特图示例

4.8、样式

甘特图的样式是通过定义一些CSS类来实现的。在渲染过程中，这些类将从位于src/diagrams/gantt/styles.js的文件中提取。

使用的类

类描述
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;
}

4.9、今天标记(当前日期标记)

您可以设置当前日期的标记样式或隐藏该标记。要设置其样式，请为 key 添加一个值。
您可以针对“当前日期标记”设置样式或隐藏“当前日期标记”。
要进行样式设置，请为todayMarker关键字。

todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5

隐藏标记, 设置 todayMarker关闭。

todayMarker off

显示标记, 设置 todayMarker打开。

todayMarker on

4.10、配置

可以调整甘特图的渲染边距。（调整用于渲染甘特图的边距。）
这是通过定义配置对象的ganttConfig部分来实现的。如何使用CLI在mermaidCLI页面中进行了描述。
mermaid.ganttConfig可以设置为带有配置参数的JSON字符串或相应的对象。

mermaid.ganttConfig = {
  titleTopMargin: 25, // 图表上方文本的页边空白
  barHeight: 20, // 图表中条形的高度
  barGap: 4, // 甘特图中不同活动之间的边距
  topPadding: 75, // 标题和甘特图之间以及轴和甘特图之间的边距。
  rightPadding: 75, // 活动右侧为节名分配的空间
  leftPadding: 75, // 活动左侧为节名称分配的空间
  gridLineStartPadding: 10, // 网格线的垂直起始位置
  fontSize: 12, // 字体大小
  sectionFontSize: 24, //章节字体大小
  numberSectionStyles: 1, // 交替截面样式的数量
  axisFormat: '%d/%m', // 轴的日期/时间格式
  tickInterval: '1 week', // 轴刻度
  topAxis: true, // 设置此标志后，日期标签将添加到图表顶部
  displayMode: 'compact', // 打开紧凑模式
  weekday: 'sunday', // 一周的间隔应该从哪一天开始
};

可以配置的参数:

参数描述默认值
mirrorActor开启/关闭在图表下方和上方的actor的渲染。false
bottomMarginAdj调整图形结束的位置。带有CSS宽边框样式可能会生成意外的裁剪，因此存在这个配置参数。1

4.11、互动

可以将单击事件绑定到任务。点击可以导致javascript回调或链接，该链接将在当前浏览器选项卡中打开。注意：使用securityLevel='strict’时禁用此功能，使用securityLevel='lose’时启用此功能。

click taskId call callback(arguments)
click taskId href URL

taskId是任务的id
callback是在显示图形的页面上定义的javascript函数的名称，如果没有指定其他参数，则将以taskId作为参数调用该函数。

在html上下文中使用交互式链接的完整示例：

<body>
  <pre 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()
  </pre>

  <script>
    const printArguments = function (arg1, arg2, arg3) {
      alert('printArguments called with arguments: ' + arg1 + ', ' + arg2 + ', ' + arg3);
    };
    const printTask = function (taskId) {
      alert('taskId: ' + taskId);
    };
    const config = {
      startOnLoad: true,
      securityLevel: 'loose',
    };
    mermaid.initialize(config);
  </script>
</body>

五、示例

5.1、条形图（使用甘特图）

gantt
    title Git问题-自上次更新以来的天数
    dateFormat X
    axisFormat %s
    section 第19062节
    71   : 0, 71
    section 第19401节
    36   : 0, 36
    section 第193节
    34   : 0, 34
    section 第7441节
    9    : 0, 9
    section 第1300节
    5    : 0, 5

实例渲染效果如下：

0 5 10 15 20 25 30 35 40 45 50 55 60 65 70 71 36 34 9 5 第19062节 第19401节 第193节 第7441节 第1300节 Git问题-自上次更新以来的天数 
gantt
        dateFormat  YYYY-MM-DD
        title 现有任务甘特图
        section 现有任务
        已完成               :done,    des1, 2022-01-06,2014-01-08
        进行中               :active,  des2, 2022-01-09, 3d
        计划一               :         des3, after des2, 5d
        计划二               :         des4, after des3, 5d

实例渲染效果如下：

2022-01-07 2022-01-09 2022-01-11 2022-01-13 2022-01-15 2022-01-17 2022-01-19 2022-01-21 已完成 进行中 计划一 计划二 现有任务 现有任务甘特图 
gantt
    title 购买设备成本
    dateFormat  YYYY-MM-DD
    section 设备购买
    设备需求           :done,    des1, 2022-01-01, 2022-01-05
    设备选型           :active,  des2, 2022-01-06, 2022-01-10
    设备采购           :         des3, 2022-01-11, 2022-01-15
    设备付款           :         des4, 2022-01-16, 2022-01-20
    section 设备交付
    设备交付           :         des5, 2022-01-21, 2022-01-25
    设备验收           :         des6, 2022-01-26, 2022-01-30
    设备调试           :         des7, 2022-01-31, 2022-02-04
    section 成本支付
    设备首付款         :         des8, 2022-01-16, 2022-01-20
    设备尾款           :         des9, 2022-01-31, 2022-02-04

实例渲染效果如下：

2022-01-01 2022-01-03 2022-01-05 2022-01-07 2022-01-09 2022-01-11 2022-01-13 2022-01-15 2022-01-17 2022-01-19 2022-01-21 2022-01-23 2022-01-25 2022-01-27 2022-01-29 2022-01-31 2022-02-01 2022-02-03 设备需求 设备选型 设备采购 设备付款 设备首付款 设备交付 设备验收 设备调试 设备尾款 设备购买 设备交付 成本支付 购买设备成本

Markdown 语法详解大全(超级版)（一）
Markdown 语法详解大全(超级版)（二）
Markdown 语法详解大全(超级版)（三）
Markdown 语法详解大全(超级版)（四）
Markdown 语法详解大全(超级版)（五）
Markdown 语法详解大全(超级版)（六）

逆境清醒
关注
专栏目录
Markdown语法图文全面详解(10分钟学会)
黑暗星球
08-02 29万+
转自【码个蛋微信公众号】，感兴趣的同学可以添加码个蛋微信公众号。 前言 写过博客或者github上面的文档的，应该知道Markdown语法的重要性，不知道的朋友们也别着急，一篇博文轻松搞定Markdown语法。话说这个语法超级简单，一看就会，不信你点进来看看。 快捷键 功能 快捷键 加粗 Ctrl + B 斜体 Ctrl + I 引用 ...
Markdown 语法详解大全(超级版)（二）——图片、表格、段落、转义字符、内嵌、注释、缩进、公式
逆境清醒的博客
10-05 914
Markdown 语法详解大全(超级版)（二）——图片、表格、段落、转义字符、内嵌、注释、缩进、公式
latex 甘特图_Markdown语法图文全面详解(10分钟学会)
weixin_42410566的博客
12-24 907
点击上方蓝字关注公众号码个蛋第255次推文程序员必备语法作者：AWeiLoveAndroid博客：https://www.jianshu.com/u/f408bdadacce文章目录快捷键基本语法对字体设置斜体、粗体、删除线分级标题链接分割线代码块引用列表表格常用技巧换行缩进字符如何打出一些特殊符号字体、字号与颜色链接的高级操作背景色emoji表情符号高端用法使用LaTex数学公式流程图制作一份待...
Markdown 语法详解大全(超级版)（一）——标题、字体文本式样、颜色、列表、版块区块、缩进、列表项
逆境清醒的博客
10-02 1102
Markdown 语法详解大全(超级版)（一）——标题、字体文本式样、颜色、列表、版块区块、缩进、列表项
markdown语法详解(readme语法看这一篇就够了)
Timmer的博客
03-19 1129
Markdown就是一种文档的格式，文件名的末尾是.md，是一种轻量级的标记语言，目前已经在Github、csdn等多个网站使用。
Markdown语法图文全面详解
weixin_50464560的博客
03-15 415
转自码个蛋公众号 目录 1. 快捷键2. 基本语法 2.1 字体设置斜体、粗体、删除线2.2 分级标题2.3 链接2.4 分割线2.5 代码块2.6 引用2.7 列表2.8 表格 3. 常用技巧 3.1 换行3.2 缩进字符3.3 特殊符号3.4 字体、字号与颜色3.5 链接的高级操...
Markdown语法图文详解
weixin_44860981的博客
01-26 2232
Markdown 语法入门 文章目录一、关于Markdown二、Markdown 编辑器2.1 MarkdownPad2.2 Typora三、Markdown基本语法3.1 快捷键3.2 标题编辑效果展示效果展示效果展示效果展示效果展示效果展示3.3 文字编辑3.3.1 斜体、粗体、高亮、删除线3.3.2 字体、字号与颜色3.4 分割线3.5 脚注3.6 列表3.6.1 有序列表3.6.2 无序列表3.6.3 列表嵌套3.7 添加链接3.7.1 网址链接3.7.2 添加目录3.7.3 锚点3.8 添加图片3
【新手福利】——Markdown 语法图文细致详解
devops
02-02 585
    你好
Markdown语法详解PDF
01-22
Markdown的扩展语法涉及更多功能，如流程图、时序图、甘特图等，这些通常依赖于特定的Markdown解析器或编辑器支持。 Markdown的转换工具有很多，如Typora、Visual Studio Code（VS Code）带有Markdown插件，...
MarkDown基础语法使用.pdf
04-23
### MarkDown基础语法详解 #### 一、标题 在MarkDown中定义标题非常简单，只需在文本前加上对应数量的`#`号即可。`#`号的数量代表着标题的级别，从一级到六级不等。 - **一级标题**：使用1个`#`号，如：`# 一级...
markdown语法图文全面详解（几分钟就能学会）以及idea如何创建markdown文件
念兮为美
08-09 3556
本文使用图文全面详解Markdown语法，让你在几分钟内就能学会，以及idea如何创建markdown文件。Markdown 是一种方便记忆、书写的纯文本标记语言，用户可以使用这些标记符号以最小的输入代价生成极富表现力的文档：譬如您正在阅读的这份文档。它使用简单的符号标记不同的标题，分割不同的段落，粗体 或者 斜体 某些文字等等。.........
【Android -- 写作工具】Markdown 甘特图
Kevin Learn Android
06-02 2618
Markdown 的原生语法不支持绘制图形，但通过扩展模块，我们可以将一些格式化的文字渲染成我们需要的图形。常用的图形有 “流程图”、“时序图”、“类图”、“状态图”、“甘特图”、”饼图” 等。......
3、AI测试辅助-测试计划编写(自动生成任务甘特图)
小生测试的博客
09-29 1104
网址，发现报错了，ChatGpt3.5生成的格式有问题，多次修改后还是报错。提示词：当我是测试经理时，根据上述的电商app购物车模块的功能需求，请帮我编写一页完整的测试计划。周期是不对的，最后需要自己手动修改。系统测试（导航和操作流畅性测试）系统测试（主题风格一致性测试）集成测试（添加商品到购物车）系统测试（浏览器兼容性测试）系统测试（错误信息提示测试）系统测试（无障碍访问性测试）系统测试（响应式布局测试）系统测试（用户友好性测试）集成测试（修改商品数量）验收测试（修改商品数量）系统测试（完整回归测试）
基于Java语言的蓝牙遥控器设计源码，支持键盘、鼠标、影音遥控器
10-05
该项目为基于Java语言的蓝牙遥控器设计源码，包含539个文件，涵盖307个Java源文件、120个XML配置文件、34个PNG图片文件、16个Gradle构建文件、12个Git忽略文件、9个文本文件、6个JAR包文件、5个JSON配置文件、5个JPG图片文件。该遥控器支持键盘、鼠标和影音控制功能，适用于多种场合。
数据手册-74HC573-datasheet.zip
10-05
数据手册-74HC573-datasheet.zip
苏州科技大学在辽宁2020-2024各专业最低录取分数及位次表.pdf
10-05
那些年，与你同分同位次的同学都去了哪里？全国各大学在辽宁2020-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
c++的概要介绍与分析
最新发布
10-05
关于C++的资源描述和项目源码，以下是一些关键信息： 资源描述 C++是一种广泛应用于开发高性能应用程序的编程语言，既有高级语言的特性，也有低级语言的效率。以下是C++学习资源的简要描述： 在线课程：如优达学城提供的C++中级课程，以及北京大学提供的C++程序设计和C++程序设计进阶课程，这些课程适合从零开始系统学习C++，涵盖从基础到高级的编程内容。 书籍：如《C++ Primer》、《Effective C++》和《C++标准库》等，这些书籍详细介绍了C++语言的基本概念和编程技术，适合作为自学或课堂教学的参考资料。 在线社区：如CSDN博客和Stack Overflow等，这些社区提供了丰富的C++编程教程、示例代码和问题解决方案，是学习和交流C++编程技术的重要平台。 开发工具：如Visual C++（VC）等集成开发环境（IDE），提供了编译器、调试器和其他工具，方便开发者进行Windows平台上的C++应用程序开发。 项目源码 由于项目源码通常包含大量的代码文件和资源文件，且涉及版权和知识产权问题，因此无法在此直接提供完整的项目源码。不过，以下是一些获取C++项目源码的
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

逆境清醒

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值