| Markdown mermaid种草(4) | 您所在的位置：网站首页 › md评审 › Markdown mermaid种草(4) |
Markdown mermaid种草(4)
|
Markdown mermaid种草(4)_ 甘特图
文章目录
Markdown mermaid种草(4)_ 甘特图1 甘特图简介2 mermaid甘特图语法及参数2.1 gantt图开始关键字2.2 title 标题2.3 date Format 时间格式指定2.4 axis Format 时间轴格式2.5 section 区块分割 和 task 任务条2.6 task bar state 进度条状态2.7 today Marker 当前时间线2.8 excludes排除日期2.9 综合举例
1 甘特图简介
甘特图是工程计划中常用的一种图形，用以管理任务的分解、时间的长度和节点计划、以及实际进度和计划进度的差距等等. 甘特图将记录每个计划的任务作为一个连续的条形，从左到右延伸. x 轴表示时间， y 轴记录不同的任务及其完成顺序. 从上面这段描述里我们能够摘取到甘特图的一些重要因素：时间、任务、计划和进度. 对于mermaid甘特图，我们也是要围绕以上要素组织和讨论. 2 mermaid甘特图语法及参数 2.1 gantt图开始关键字 调用mermaid,可以首先从标题开始. 标题的关键字为gantt. gantt 表明这是一段mermaid用来绘制甘特图的代码. 仅此而已. 2.2 title 标题 title关键字表明当前绘制的甘特图的标题，注意title是可以缺省的.甘特图可以不加标题. gantt title This is a title 2.3 date Format 时间格式指定 甘特图指定时间格式的关键字为dateFormat： gantt dateFormat YYYY-MM-DD 除了上例中演示的时间格式之外，还可以使用其他的时间格式，dateFormat允许的时间格式一览表： 输入举例描述YYYY20214位数表示年份YY212位数表示年份Q1…4表示季度，设置月份时将直接跳到季度的第一个月份M MM1…12按数字表示的月份MMM MMMMJan…Dec按月份简称表示的月份D DD1…31按数字表示的日期DDD DDDD1…365按日期在一年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 2.4 axis Format 时间轴格式 axisFormat关键字用以指定时间轴的单位格式，默认的时间格式是YYYY-MM-DD. 用axisFormat关键字来指定时间单位格式时，每一个组合都是由一个%引导，如下例所示： axisFormat %Y-%m-%d 此例中，%Y表示的是年，%m表示的月，%d表示的是天. 符号写法含义样例举例%a缩写的星期几的名称Mon Tue Wed Thu Fri Sat Sun%A全称的星期几的名称Monday Tuesday Wednesday Thursday Friday Saturday Sunday%b缩写的月份名称Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec%B全称的月份名称January February March April May June July August September October November December%c日期和时间，和"%a %b %e %H:%M:%S %Y"一样Mon Apr 3 12:11:23 2020%d用0填充补位的月份中的日期，十位小数[01,31]01 02 03 04 05…31%e用空格填充补位的月份中的日期，十位小数[ 1,31]_1, _2, _3 … 31(_表示补位的空格)%H24小时制十进制数表示小时1 2 3 4 5 … 24%I12小时制十进制数表示小时1 2 3 4 5 … 12%j十进制数表示一年中的第几天[001,366]001， 002， 003 … 366%m十进制数表示月份[01,12]01, 02, 03 … 12%M十进制表示分钟[00, 59]00, 01, 02, 03 … 59%L十进制表示毫秒[000,999]000, 001, 002 … 999%pAM或者PMAM PM%S十进制表示秒数[00, 61]00, 01, 02, 03 … 61%U十进制表示一年中的第几周（星期日为一周之始）[00, 53]00, 01, 02, 03 … 53%w用十进制数字表示星期[0(星期天), 6]0 1 2 3 4 5 6%W十进制表示一年中的第几周（星期一为一周之始）[00, 53]00, 01, 02, 03 … 53%x日期，“%m/%d/%Y”5/3/2020%X时间，“%H:%M:%S”12:23:32%y十进制的年份表示，没有世纪，仅保留最后两位[00, 99]00, 01, 02 … 99%Y完整的年份表示2000 2001 2002%Z时区补偿，如“-0700”0800 -0700%%%号% 2.5 section 区块分割 和 task 任务条 section关键字是用来表示任务的分块的，不同的任务隶属于不同的section. section后同行的内容全部作为该section的区块名称. 一个section下可以并排排入多个同级的task任务. 每一个task对应一个甘特图进度条. 每一个task后，跟进的是状态（可缺省）、任务名（可缺省）、开始时间（或任务位置）、延续时长（或结束时间）. 写成语法格式为： task显示名 : 状态（可缺省） 任务名（可缺省） 开始时间（或任务位置） 延续时长（或结束时间） 其中，任务名可用作位置标记，比如： gantt section S1 task name1 : desA, 2020-1-5, 2d task name2 : after desA, 2d
task进度条有三种状态，，done，active 其中，表示的状态即为缺省下的状态，具体来说，就是已计划但尚未实施. done表示该工作已完成. active表示该工作正激活，处于正在进行中. 对于关键任务，还提供了一个crit状态，表示该任务为关键任务. crit状态可以与其他状态复用. 可以从下例中看到不同状态的进度条颜色： gantt title Example section sectionA taskA: done, 2021-2-4, 1d taskB: 2021-2-5, 1d taskC: active, 2021-2-6, 3d taskD: crit, 2021-2-9, 2d
可以打开（默认）/关闭当前时间线的显示. 即 todayMarker gantt title Example section SectionA task A : 2021-2-3, 10d task B : 2021-2-14, 12d
可以用excludes语句排除周末或某指定日期. 例如 excludes weekends 表示排除周末 excludes sunday 表示排除星期六 excludes 2020-5-20 表示排除2020-5-20 但是要注意，没有excludes weekdays. 2.9 综合举例 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, 2021-02-06,2021-02-08 Active task :active, des2, 2021-02-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, 2021-02-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 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
|
【本文地址】