Mermaid制作甘特图

最近因为项目需要，这几天一直在学习怎么用JAVAWEB取值制作甘特图，忙了几天，终于整理出来一个简单实用的方法。分享出来给大家参考使用。

甘特图制作有效的方法：

extjs甘特图：

这个插件目前是免费开源的，稍后会放到CSDN上供大家下载，如果有需要可以下载使用。这个插件的截图效果如下：
mermaid甘特图

这个插件目前是开源在github上的；

下载链接：https://mermaidjs.github.io/

在线编辑器：https://mermaidjs.github.io/mermaid-live-editor/

demo示例：

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

实际项目使用步骤：

第一步：

导入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}

实现效果图：

欢迎大家评论转发，收藏！

由于水平有限，本博客难免有不足，恳请各位大佬不吝赐教！