文章目录
- 甘特图
- 基本语法
- dateFormat格式
- axisFormat格式
甘特图
甘特图从外观来看，是一种水平条形图，其横轴表示时间，纵轴表示任务，从而直观展示项目进度计划。简单示例如下
其代码为
gantt title 核心功能发布计划 dateFormat YYYY-MM-DD axisFormat %m-%d section 需求与设计 需求评审(已完成) :done, req1, 2026-08-20, 2d 架构设计(进行中) :active, des1, 2026-08-22, 3d section 开发与交付 核心模块开发(关键) :crit, dev1, after des1, 5d 系统联调 : dev2, after dev1, 2d 正式上线(里程碑) :milestone, m1, after dev2, 0d甘特图中的四个长条，名字分别是req1, des1, dev1, dev2，最后的菱形里程碑，则是m1。
基本语法
甘特图中，除了时间轴和时间轴之外，剩下的工作就是描述事件，其基本语法为
事件说明 :状态 事件代号, 开始日期, 持续时间其中，状态共有四种，分别是
- done：已完成（默认灰色）
- active：进行中（默认深色）
- crit：关键路径/核心任务（默认红色高亮）
- milestone：里程碑，被渲染为菱形，持续时间必须为 0
dateFormat格式
dateFormat为时间轴上的时间日期格式，可选参数如下表所示
| 输入 | 示例 | 描述 |
|---|---|---|
| YY YYYY | 26 2026 | 两位；四位年份 |
| Q | 1…4 | 年的季度。设置月份为该季度的第一个月 |
| M MM | 1…12 | 月份数字 |
| MMM MMMM | 一月…十二月 | 按 dayjs.locale() 设置的区域显示的月份名称 |
| D DD | 1…31 | 月中的天数 |
| DDD DDDD | 1…365 | 年中的天数 |
| Do | 1st…31st | 带序数的月日 |
| X | 1410715640.579 | Unix 时间戳 |
| x | 1410715640579 | Unix 毫秒时间戳 |
| H HH | 0…23 | 24 小时时间 |
| h hh | 1…12 | 12 小时时间，与 a A 配合使用 |
| a A | am pm | 上午或下午 |
| m mm | 0…59 | 分钟 |
| s ss | 0…59 | 秒 |
| S,SS,SSS | 0…9 | 秒的小数位(S个数对应位数) |
| Z ZZ | +12:00 | 相对于 UTC 的偏移，格式为 ±HH:mm、±HHmm 或 Z |
axisFormat格式
axisFormat是坐标轴上的输出时间格式，可选代码如下表所示。
| 格式 | 定义 |
|---|---|
| %a %A | 星期名称（缩写和完整的） |
| %b %B | 月份名称（缩写和完整的） |
| %c | 日期和时间，格式为 “%a %b %e %H:%M:%S %Y” |
| %d | 以零填充的月份中的日期，作为十进制数字 [01,31] |
| %e | 月中的日期，以十进制数字表示并用空格填充 [1,31]；等同于 %_d |
| %I %H | 小时（12小时制和24小时制），十进制数字 [00,23] [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” |
| %% | 一个字面的“%”字符 |
