一、引言

甘特图是一种常用的项目管理工具，用于展示项目任务的时间安排和进度。在Web开发中，JavaScript甘特图组件可以帮助开发人员快速构建交互式、可视化的项目甘特图，提高项目管理效率。本报告旨在对几种常见的JavaScript甘特图组件如jQuery Gantt、DevExtreme Gantt、Frappe Gantt和DHTMLX Gantt进行调研，分析其特点、功能、优势和劣势。

二、调研对象

1. jQuery Gantt
2. DevExtreme Gantt
3. Frappe Gantt
4. DHTMLX Gantt

三、调研内容

3.1 jQuery Gantt

（ 1 ）官方介绍： Draw Gantt charts with the famous jQuery ease of development。

（ 2 ） Github Star ： 952

（ 3 ）开源情况： MIT license

（ 4 ）功能特点：*

序号	支持的功能	不支持的功能
1	视图时间支持最小到每小时****	拖拽任务的时间范围****
2	读取json数据画甘特图****	拖拽任务的进度****
3	Display different colours for each task****	横向拖拽任务的开始时间
4	浮动窗口显示任务的具体内容****	可视化新增任务****
5	Mark holidays****	箭头指定依赖关系****

（ 5 ）生态系统：

1）官方网址：taitems.github.io/jQuery.Gant…

2） 文档情况：有英文文档

3） 依赖的库：jquery和moment

4） 代码量：js 1721行 css 430行

5） 浏览器支持情况：Firefox 4+、Chrome 13+、Safari 5+、Opera 9+、IE 8+

（ 6 ）可定制性：

基于代码开源，MIT license可定制，以及代码量的情况可以看出jQuery Gantt是可以定制的

（ 7 ）示例：

     

3.2 DevExtreme Gantt

（ 1 ）官方介绍： A Modern JavaScript UI 

（ 2 ） Github Star ： 1.8K

（ 3 ）开源情况： 没有开源，但有开源的devextreme-vue组件

（ 4 ）功能特点：

序号	支持的功能	不支持的功能
1	支持拖拽任务的时间范围	不支持纵向拖拽任务条（jira也不支持）
2	支持拖拽任务的进度
3	支持横向拖拽任务的开始时间
4	支持箭头指定依赖关系
5	支持浮动窗口显示任务的具体内容（如：时间跨度，当前进度和依赖关系）
6	视图时间支持：1/4天，半天，天，周，月，年
7	可视化动态创建任务（可以通过改变数据创建任务，需要刷新页面才能看到新任务）
8	支持FF，FS， SS， SF的表达

（ 5 ）生态系统：

1）官方网址：js.devexpress.com/

2. 文档情况：有丰富的文档js.devexpress.com/Vue/Documen…

3. 依赖的库：vue2

4. 代码量：未开源，未知

（ 6 ）可定制性：

未开源，不可定制

（ 7 ）示例：

3.3 Frappe Gantt

（ 1 ）官方介绍： A simple, interactive, modern gantt chart library for the web with drag, resize, dependencies and time scales

（ 2 ） Github Star ： 4.2K

（ 3 ）开源情况： MIT License

（ 4 ）功能特点：

序号	支持的功能	不支持的功能
1	支持拖拽任务的时间范围	可视化动态创建任务（可以通过改变数据创建任务，需要刷新页面才能看到新任务）
2	支持拖拽任务的进度	FF，FS， SS， SF的表达
3	支持横向拖拽任务的开始时间	纵向拖拽任务条（jira也不支持）
4	支持箭头指定依赖关系
5	支持浮动窗口显示任务的具体内容（如：时间跨度，当前进度和依赖关系）
6	视图时间支持：1/4天，半天，天，周，月，年

（ 5 ）生态系统：

1）官方网址：frappe.io/gantt

2. 文档情况：无详细文档

3. 依赖的库：无

4. 代码量：js 1721行 css 430行

（ 6 ）可定制性：

完全开源，代码量少，纯甘特图的库；可定制

（ 7 ）示例：

3.4 DHTMLX Gantt

（ 1 ）官方介绍： DHTMLX Gantt is the most complete Gantt chart library to cover all the needs of a project management app and advance web development

（ 2 ） Github Star ： 1.2K

（ 3 ）开源情况： GNU GENERAL PUBLIC LICENSE（GPL-2.0）

（ 4 ）功能特点：

序号	支持的功能	不支持的功能****
1	支持拖拽任务的时间范围	纵向拖拽任务条（jira也不支持）
2	支持拖拽任务的进度
3	支持横向拖拽任务的开始时间
4	支持箭头指定依赖关系
5	支持浮动窗口显示任务的具体内容（如：时间跨度，当前进度和依赖关系）
6	视图时间支持：1/4天，半天，天，周，月，年
7	可视化动态创建任务（可以通过改变数据创建任务，需要刷新页面才能看到新任务）
8	支持FF，FS， SS， SF的表达

（ 5 ）生态系统：

1）官方网址：dhtmlx.com/docs/produc…

2） 文档情况：丰富的API文档 docs.dhtmlx.com/gantt/api__…

3）依赖的库：有vue组件，依赖vue2。（dhtmlx-gantt）

4）代码量：未开源，未知

（ 6 ）可定制性：

     未开源，不可定制

（ 7 ）示例：

四、调研结论

	功能	jQuery Gantt	DevExtreme Gantt	Frappe Gantt	DHTMLX Gantt
1	License	MIT	收费	MIT	GPL-2.0
2	功能支持情况	最差	丰富	一般	丰富
3	定制性	可定制	不可定制	可定制	不可定制
4	框架大小	较轻	重	最轻	重

几款组件横向对比

 

1. jQuery Gantt：

优点： 轻量级且易于使用，适合简单的项目管理需求；基于jQuery开发，比较好掌握，也方便后期自己扩展；

缺点：库比较老，jQuery的语法和ES的兼容性有待考证，并且还需要依赖比较重的jQuery库。

2. DevExtreme Gantt：

优点：基于DevExtreme，提供多样化的主题和样式选项，适合与其他DevExtreme组件配合使用。

缺点： 库比较重，而且是收费软件，后期不方便扩展

3. Frappe Gantt：

优点： 轻量易于使用且代码量少，适合做定制开发。

缺点： 支持的功能没有那丰富

4. DHTMLX Gantt：

优点： 功能丰富，支持多种视图和自定义样式，适合构建复杂的项目甘特图。

缺点： 库比较重，半开源，不支持后续定制开发

五、建议

经过比较，功能完备的库都是需要收费的，开源的库功能相对单薄。业界其他的一些甘特图组件也都是这两个方向，比如收费的甘特图组件还有Bryntum，AnyGantt，FusionCharts Gantt。这类收费的甘特图组件中，比较优秀的就是DHTMLX Gantt，它使用比较广泛，半开源，并且也有VUE的组件。

纯开源的甘特图组件中Frappe Gantt比较优秀，代码量少，支持的功能基本够用，且没有其他库的依赖；也方便后期继续做二次开发。

综上所述： 出产品快，且能保证功能推荐使用DHTMLX Gantt；出于License考虑，且需要自己做二次开发，推荐使用Frappe Gantt。

六、参考资料

1. jQuery Gantt GitHub仓库：github.com/taitems/jQu…
2. devextreme Gantt GitHib仓库：github.com/DevExpress/…
3. Frappe Gantt GitHub仓库：github.com/frappe/gant…
4. DHTMLX Gantt GitHub仓库：github.com/DHTMLX/gant…
5. DHTMLX Gantt官方网站：dhtmlx.com/docs/produc…