您的位置: 首页  >  文章  >  Mermaid制作甘特图

Mermaid制作甘特图

分类: 文章 • 2024-09-18 19:49:04 
	最近因为项目需要，这几天一直在学习怎么用JAVAWEB取值制作甘特图，忙了几天，终于整理出来一个简单实用的方法。分享出来给大家参考使用。
	甘特图制作有效的方法：
  1. extjs甘特图
    这个插件目前是免费开源的，稍后会放到****上供大家下载，如果有需要可以下载使用。这个插件的截图效果如下：
    Mermaid制作甘特图
  2. mermaid甘特图
    这个插件目前也是开源的，下载链接是在github上：https://mermaidjs.github.io/
    在线编辑器：https://mermaidjs.github.io/mermaid-live-editor/
    网上Demo示例：

gantt
dateFormat YYYY-MM-DD
title Shop项目交付计划

section 里程碑 0.1 
数据库设计          :active,    p1, 2016-08-15, 3d
详细设计            :           p2, after p1, 2d
 
section 里程碑 0.2
后端开发            :           p3, 2016-08-22, 20d
前端开发            :           p4, 2016-08-22, 15d
 
section 里程碑 0.3
功能测试            :       p6, after p3, 5d
上线               :       p7, after p6, 2d
交付               :       p8, afterp7, 2d

实际项目使用步骤：
第一步：
导入https://cdn.bootcss.com/mermaid/8.0.0-rc.8/mermaid.min.js
第二步：设置一个div，然后开始日期，结束日期传参即可。

<div class="mermaid" style="background-color:">
				gantt
				项目启动日${var.START_DATE}   项目结束日${var.CUST_DATE}:${var.START_DATE},${var.CUST_DATE}
				实际开始日${var.ACTU_MIN_DATE}   实际完成日${var.ACTU_MAX_DATE}:${var.ACTU_MIN_DATE},${var.ACTU_MAX_DATE} 
				计划开始日${var.PLAN_MIN_DATE}   计划完成日${var.PLAN_END_DATE}:${var.PLAN_MIN_DATE},${var.PLAN_END_DATE}
	</div>

实现效果图：
Mermaid制作甘特图

相关推荐