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 应该大同小异, 这是对于不同的维度有不同的权重, 比如对于价格或是性能特别看重。建议是可以考虑使用综合评分法来进行最后的选定。

web 端 gantt组件选型的更多相关文章

  1. 移动web端的react.js组件化方案

     背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...

  2. 值得收藏的8个Web端组件库

    值得收藏的8个Web端组件库 Ant Design 介绍:一个服务于企业级产品的设计体系,基于『确定』和『自然』的设计价值观和模块化的解决方案,让设计者专注于更好的用户体验. 组件库地址:https: ...

  3. c#版阿里云oss上传——基于layui、pupload的oss 后端web端直传的vue组件

    废话前言 去年,做项目用到oss上传,度娘上逛了一圈写了个前后端代码结合的c#版oss上传. 今年又要用到oss上传时发现很难复用,复用改动的范围太大,显然这个轮子不合格.于是想了下,花了一天的时间( ...

  4. 对接网易云信音视频2.0呼叫组件集成到vue中,实现web端呼叫app,视频语音通话。

    项目中需要实现视频通话功能,经过公司的赛选,采用网易云信的视频通话服务,app小伙伴集成很顺利.web端需要实现呼叫app端用户.网易云信文档介绍不全,vue的demo满足不了需求,和客服人员沟通,只 ...

  5. Atitit..文件上传组件选型and最佳实践总结(2)----断点续传

    Atitit..文件上传组件选型and最佳实践总结(2)----断点续传 1. 断点续传的原理 1 2. 如何判断一个插件/控件是否支持断点续传?? 1 3. 常用的组件选型结果::马 1 4. 自定 ...

  6. atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7

    atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7 1. 实现原理 1 2. 大的文件上传原理::使用applet 1 3. 新的bp 2 1. 性能提升---分割小文件上传 ...

  7. web前端技术框架选型参考

    一.出发点 随着Web技术的不断发展,前端架构框架.UI框架.构建工具.CSS预处理等层出不穷,各有千秋.太多的框架在形成初期,都曾在web领域 掀起过一场技术浪潮,可有些却仅仅是昙花一现,随着他们用 ...

  8. 力软信息化系统快速开发框架 web端+winform端

    力软信息化系统快速开发框架是一套集权限管理+快速开发+动态接口+通用组件+动态UI于一体的全新.net信息化快速开发框架.力软信息化系统快速开发框架的使用,大大地缩短了开发周期,提高了软件质量,同时也 ...

  9. Web端即时通讯技术盘点:短轮询、Comet、Websocket、SSE

    1. 前言 Web端即时通讯技术因受限于浏览器的设计限制,一直以来实现起来并不容易,主流的Web端即时通讯方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Serve ...

随机推荐

  1. SC命令(windows服务开启/禁用)

    原文链接地址:https://blog.csdn.net/cd520yy/article/details/30976131 sc.exe命令功能列表: 1.更改服务的启动状态(这是比较有用的一个功能) ...

  2. JS中如何使用EL表达式中的对象

    JS中如何使用EL表达式中的对象 2017年09月25日 15:33:09 lhpnba 阅读数:4859   1.js中使用el表达式要加双引号或单引号:'${list}' 2.js变量获取el表达 ...

  3. lnmp集成环境tp nginx vhost配置

    server { listen 80; server_name xxx; charset utf-8; root /home/wwwroot/axxx/public; index index.html ...

  4. ZABBIX 3.0 配置监控NGINX性能【OK】

    1.在agent端查看配置: nginx -V //查看编辑时是否加入状态监控模块:--with-http_stub_status_module --with-http_gzip_static_mod ...

  5. WPF系列之三:实现类型安全的INotifyPropertyChanged接口,可以不用“Magic string” 么?

    通常实现INotifyPropertyChanged接口很简单,为你的类只实现一个PropertyChanged 的Event就可以了. 例如实现一个简单的ViewModel1类: public cl ...

  6. 「git」mac下git提交github代码

    1.打开终端,输入 cd -/.ssh 这个是检查你的ssh的是否存在的,如果存在,先将已有的ssh备份,或者将新建的ssh生成到另外的目录下(如果第一次配置一般都是不存在的),不存在,你将会看到如下 ...

  7. 再谈System.arraycopy和Arrays.copyOf

    之前转载过一篇博文,介绍过这两个方法,今天想要再次详细的了解一下. public static native void arraycopy(Object src, int srcPos, Object ...

  8. 如何识别字符串是否是UTF-8编码的

    我们先要弄明白原始字符串里的字符用的是何种编码方式,运行如下 string tmp = "你好world"; for(int i=0;i<tmp.size();++i) { ...

  9. centos6.5 mqtt安装

    CentOs 6.5 MQTT 安装部署 所需安装包: libwebsockets-v1.6-stable.tar.gz,mosquitto-1.4.8.tar.gz 1.安装依赖 # yum -y ...

  10. CSS中em,rem的区别

    首先这两个单位一般用在移动端 不太清楚得求证  再记录 1.em w3cschool中给出css中尺寸单位如下: 单位 描述 % 百分比 in 英寸 cm 厘米 mm 毫米 em 1em 等于当前的字 ...