web 端 gantt组件选型

gantt - 甘特图

甘特图（Gantt chart）又称为横道图、条状图(Bar chart)。其通过条状图来显示项目，进度，和其他时间相关的系统进展的内在关系随着时间进展的情况。以提出者亨利·L·甘特（Henrry L. Ganntt）先生的名字命名。

以图示的方式通过活动列表和时间刻度形象地表示出任何特定项目的活动顺序与持续时间。基本是一条线条图，横轴表示时间，纵轴表示活动（项目），线条表示在整个期间上计划和实际的活动完成情况。它直观地表明任务计划在什么时候进行，及实际进展与计划要求的对比。管理者由此可便利地弄清一项任务（项目）还剩下哪些工作要做，并可评估工作进度

应该说Gantt图是项目管理或日常管理比较常用的工具之一。

Web端的Gantt

目前， Gantt 图的软件已经很丰富。

最常见的功能比较全的有微软的 Microsoft OfficeProject. 可以帮助项目管理者实现时间、资源、成本的计划、控制。

甚至最简单的可以在Excel中绘制一个Gantt 图。

但随着B/S 架构的普及以及实际在项目管理过程中，项目管理往往是一个团队在协同工作的结果。Web端的方式可以让沟通更方便，更及时也更简单。

也是因为此，目前市面上的Web端的Gantt图组件也就层出不穷。

哪一个更好，哪一个功能更强。其实评判的标准基本来自三方面：

1. 功能全面

2. 性能出众

3. UE/UX 良好

其他当然还有价格，相关系统等等的一些次要因素了。

以下就描述一下我们团队的选型过程，仅供参考

第一步：海选备选方案收集

收集一些主流的，使用比较多的组件。方法就是 google, baidu ，另外可以是一些技术论坛

我们的收集状况如下：

第二步：细部比较

海选之后，就是细部的一些比较了

选项项次	dhtmlx Gantt	Bryntum Ext Gantt	treegrid	Twproject Gantt	Angular Gantt	gwt-gantt	jsGantt	jquery.ganttView	dgrid
基于	ExtJS	jQuery	Angular frameworks
dhtmlx组件是由位于俄罗斯圣彼得堡的DHTMLX公司开发的包含一整套交互和数据展现组件的Web-UI解决方案.Use our open source Gantt chart to illustrate a project schedule. You may show the dependency relationships between activities as lines between those activities. Current schedule status can be seen at a glance with percent-complete shadings. Projects, tasks, and activities are comfortably organized into a tree structure (left of the Gantt chart), which can be expanded/collapsed by a single mouse click. Mouseover popups show detailed activity properties.	瑞士	Teamwork Gantt is a JavaScript component built on jQuery for creating Gantt Chart, task trees, dependencies which exports the resulting data in JSON format.	Gantt Chart with Hour/Day/Week/Month/Quarter viewsCompatible with GWT 2.1 Data Presentation modelPure Java with GWT, not a JS wrappergwt-gantt is in its early stages, and currently only works with HTML5 capable webapps that support inline SVG components (Firefox 4 and Chrome 6+). Support for non-HTML5 webapps will be coming soon, but is a lower priority.	100% Free Javascript / CSS/ HTML Gantt chart control. Completely buzzword compliant including AJAX ! Basic features:Tasks & Collapsible Task GroupsMultiple DependenciesTask CompletionTask ColorMilestonesResourcesNo images needed	A next-generation grid component that takes full advantage of modern browsers and object stores. Lightweight, modular, and easily extensible, dgrid is released under the same open-source license and CLA as the Dojo Toolkit. Easily extend dgrid to create complex components, e.g. Gantt chart.
功能	功能比较	功能比较
使用普遍性
baidu 结果	46,800	18,200
google 结果	223,000	27800
Stackover flow	949	26
成功案例	Apple Sony Microsoft Audi Bank of America AT&T CommerzbankFedex BMW Nokia Samsung Boeing Cisco NovellSiemens NASA Deutsche bank IBM Nasdaq Symantec JP Morgan Chase	SONY，FLORIDA STATE UNIVERSITY,eTASK
与现有系统的整合	最新版 Extjs6. 现有系统Extjs 4
是否支持Extjs , 以及支持的版本
开发的便捷度
document 的完善程度
开发的简易与熟练程度
性能	性能量测	性能量测
Browser	Chrome, Firefox, Safari, Opera and IE8+	IE, FF, Chrome, Safari, Opera
更新状况	好	好

以上不清楚，贴个图

第三步：最终备选方案比较

经过上面的一轮比较之后，基本上可以确定两个比较好的备选方案了，接下来就是对这两个备选方案进行更细致的比较。

这里选定的是 DHTMLX和Bryntum，比较维度就是功能和性能了

1. 功能比较

	DHTMLX	Bryntum
Rich drag-and-drop behavior to manage tasks	V	V
Critical path calculation	V	V
Customizable task edit form	V	V
Tasks Grouping	V
Support of baselines, deadlines and other custom elements	V	V
Progress percent coloring for tasks	V
Auto Scheduling	V	V
Dependency arrows	V	V
Configurable columns in the grid	V	V
Multi-task selection	V
Dynamic loading	V
different skins	V	V
Export to Excel, iCal	V
Export to PDF/PNG	V	V
MS Project Import	V
Holidays and Working Days	V	V
Progress bar	V	V
Buffer rendering	鸡肋

2. 性能测量

性能测量要根据所开发的系统预测的使用状况的一般值和极限值的状况进行量测。

http://localhost:8080/ganttChart/bryntum/examples/test/test.html	http://localhost:8080/ganttChart/dhtmlx/samples/test/test.html				Chrome(No Cache)s			Chrome(Cache)s
No	Project数量	Task數量	Link數量	Owner數量	Auto Schedule	量測項目	Bryntum (最简单)	Bryntum (最复杂)	dhtmlx	Bryntum (最简单)	Bryntum (最复杂)	dhtmlx
S01-0	20	2.5	3.47	0.287	1.1	2.99	0.238
S01-1	1	20	0	0	N	1) 頁面打開render完的時間	2.4	3.6	1.35	1	2.9	0.312
S01-2	1	100	0	0	N	1) 頁面打開render完的時間	2.5	5.25	1.01	1.19	2.11	0.47
S01-3	1	500	0	0	N	1) 頁面打開render完的時間	2.02	6.52	5.62	1.37	5.21	0.777
S01-4	1	2500	0	0	N	1) 頁面打開render完的時間	3.37	34	6	2.98	33	3
S02-1	1	20	10	0	N	1) 頁面打開render完的時間	1.74	4.76	0.353	1.11	2.09	0.245
S02-1	1	20	10	0	N	2) Task drag & drop render的時間	<1	<1	<1	<1
S02-2	1	100	50	0	N	1) 頁面打開render完的時間	1.85	4.81	0.491	1.22	2.35	0.35
S02-2	1	100	50	0	N	2) Task drag & drop render的時間	<1	<1	<1	<1
S02-3	1	500	250	0	N	1) 頁面打開render完的時間	2.07	4.17	0.865	1.42	3.68	0.729
S02-3	1	500	250	0	N	2) Task drag & drop render的時間	<1	1.5	<1	<1	1.5	<1
S02-4	1	2500	1250	0	N	1) 頁面打開render完的時間	4.18	36.35	5.02	3.86	35.37	5.83
S02-4	1	2500	1250	0	N	2) Task drag & drop render的時間	10	20	16	10	20	16
S03-1	1	20	0	20	N	1) 頁面打開render完的時間
S03-2	1	100	0	100	N	1) 頁面打開render完的時間
S03-3	1	500	0	500	N	1) 頁面打開render完的時間
S03-4	1	2500	0	2500	N	1) 頁面打開render完的時間
S04-1	1	20	10	0	Y	1) 頁面打開render完的時間
S04-1	1	20	10	0	Y	2) Task drag & drop重新計算的時間
S04-2	1	100	50	0	Y	1) 頁面打開render完的時間
S04-2	1	100	50	0	Y	2) Task drag & drop重新計算的時間
S04-3	1	500	250	0	Y	1) 頁面打開render完的時間
S04-3	1	500	250	0	Y	2) Task drag & drop重新計算的時間
S04-4	1	2500	1250	0	Y	1) 頁面打開render完的時間
S04-4	1	2500	1250	0	Y	2) Task drag & drop重新計算的時間
最简单状况	12 request , 419K		33 request, 4.5M

结论

我们最终的选型是dhtmlx ，并成功的运用于系统并交付使用。从最终的效果来看，选型是成功的，至少不是失败的。

对于不同的项目和团队来说，基本上选型的标准item 应该大同小异，这是对于不同的维度有不同的权重，比如对于价格或是性能特别看重。建议是可以考虑使用综合评分法来进行最后的选定。