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 1 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 1 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 1 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 1 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完的時間 1 2) Task drag & drop重新計算的時間 S04-2 1 100 50 0 Y 1) 頁面打開render完的時間 1 2) Task drag & drop重新計算的時間 S04-3 1 500 250 0 Y 1) 頁面打開render完的時間 1 2) Task drag & drop重新計算的時間 S04-4 1 2500 1250 0 Y 1) 頁面打開render完的時間 1 2) Task drag & drop重新計算的時間 最简单状况 12 request , 419K 33 request, 4.5M

结论

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

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