如何使用JS网格创建甘特图

JavaScript050

如何使用JS网格创建甘特图,第1张

本操作方法文章演示如何使用 JS 网格控件创建甘特图。在基于如何：创建基本 JS 网格构建的本主题中，您将定义摘要、标准、里程碑和完成百分比甘特条形图的样式。每个条形图样式都具有形状、图案和颜色。每个条形图尾部都具有条形图尾部样式、颜...

js 甘特图显示数量步骤操作如下：1、明确项目牵涉到的各项活动、项目。内容包括项目名称（包括顺序）、开始时间、工期，任务类型（依赖/决定性）和依赖于哪一项任务。2、创建甘特图草图。将所有的项目按照开始时间、工期标注到甘特图上。3、确定项目活动依赖关系及时序进度。使用草图，按照项目的类型将项目联系起来，并安排项目进度。4、计算单项活动任务的工时量。

5、确定活动任务的执行人员及适时按需调整工时。

6、计算整个项目时间。

甘特图被用于商业工作中的诸多场景，例如OA中项目进度管理、工厂APS中生产资料和计划的调度安排、软件开发中的项目管理等等。

项目中要用到甘特图，最开始研究了echart，实现的样式如下：

对比下面的原型图，发觉相差甚大且通过echart不好复现。

百度搜索找到了dhtmlxGantt，查看官网demo后足够实现原型效果。随即查看了官方文档，实现了如下效果：

具体的属性可以在API中查找： https://docs.dhtmlx.com/gantt/api__refs__gantt.html

开发使用说明： https://docs.dhtmlx.com/gantt/index.html

在Vue.js框架中使用步骤： https://dhtmlx.com/blog/use-dhtmlxgantt-vue-js-framework-demo/

欢迎一起交流呀~