甘特图（Javascript实现） - SIcon Gantt Chart - javascript

striver

个人空间 相册
性别:
来自:拼吾爱
积分:6811
帖子:6723
注册: 2007-04-09

2008-09-05 22:54 | 只看楼主

甘特图（Javascript实现） - SIcon Gantt Chart

附件: 您所在的用户组无法下载或查看附件

简介

笔者在开发一个基于Web的应用程序提供对人物和项目事件的管理。项目需要一个甘特图控件可视化表示任务列表，笔者尝试寻找自由可用的解决方案（因为不想增加开销）。笔者找到了一些例子，不过并不满意。于是，决定创建一个自己的甘特图控件。此次是笔者工作的最初成果。这个SIcon的最初版本只做了几个小时，所以仍会有些问题。尽管如此，笔者还是希望与各位分享，希望能帮助大家。

SICon现在支持FireFox浏览器！

背景

掌握和使用这个示例需要Jscript和CSS知识。

使用代码

代码并不是很复杂，所以我在这里将展示全部：

脚本代码

Code

[copy to clipboard]

CODE:

1 /* --------- SICON GANTT CHART -----------------------------------------------------------
2 * AUTHOR : Dathq - ICT Service Engineering Jsc, - [email]dathq@ise.com.vn[/email]
3 * LICENSE : Free
4 * DESCRIPTION : Create a new task item with these info
5 * - from: start date (format: mm/dd/dddd)
6 * - to: deadline of task (format: mm/dd/dddd)
7 * - task: name of the task, what has to be solved (not includes ')
8 * - resource: who have to solve this task (not includes ')
9 * - progress: how is it going? (format: integer value from 0 to 100, not includes %)
10 *----------------------------------------------------------------------------------------*/
11 function Task(from, to, task, resource, progress)
12 {
13 var _from = new Date();
14 var _to = new Date();
15 var _task = task;
16 var _resource = resource;
17 var _progress = progress;
18 var dvArr = from.split('/');
19 _from.setFullYear(parseInt(dvArr[2], 10), parseInt(dvArr[0], 10) - 1, parseInt(dvArr[1], 10));
20 dvArr = to.split('/');
21 _to.setFullYear(parseInt(dvArr[2], 10), parseInt(dvArr[0], 10) - 1, parseInt(dvArr[1], 10));
22
23 this.getFrom = function(){ return _from};
24 this.getTo = function(){ return _to};
25 this.getTask = function(){ return _task};
26 this.getResource = function(){ return _resource};
27 this.getProgress = function(){ return _progress};
28 }
29
30 function Gantt(gDiv)
31 {
32 var _GanttDiv = gDiv;
33 var _taskList = new Array();
34 this.AddTaskDetail = function(value)
35 {
36 _taskList.push(value);
37
38 }
39 this.Draw = function()
40 {
41 var _offSet = 0;
42 var _dateDiff = 0;
43 var _currentDate = new Date();
44 var _maxDate = new Date();
45 var _minDate = new Date();
46 var _dTemp = new Date();
47 var _firstRowStr = "<table border=1 style='border-collapse:collapse'><tr><td rowspan='2' width='200px' style='width:200px;'><div class='GTaskTitle' style='width:200px;'>Task</div></td>";
48 var _thirdRow = "";
49 var _gStr = "";
50 var _colSpan = 0;
51 var counter = 0;
52
53 _currentDate.setFullYear(_currentDate.getFullYear(), _currentDate.getMonth(), _currentDate.getDate());
54 if(_taskList.length > 0)
55 {
56 _maxDate.setFullYear(_taskList[0].getTo().getFullYear(), _taskList[0].getTo().getMonth(), _taskList[0].getTo().getDate());
57 _minDate.setFullYear(_taskList[0].getFrom().getFullYear(), _taskList[0].getFrom().getMonth(), _taskList[0].getFrom().getDate());
58 for(i = 0; i < _taskList.length; i++)
59 {
60 if(Date.parse(_taskList.getFrom()) < Date.parse(_minDate))
61 _minDate.setFullYear(_taskList.getFrom().getFullYear(), _taskList.getFrom().getMonth(), _taskList.getFrom().getDate());
62 if(Date.parse(_taskList.getTo()) > Date.parse(_maxDate))
63 _maxDate.setFullYear(_taskList.getTo().getFullYear(), _taskList.getTo().getMonth(), _taskList.getTo().getDate());
64 }
65
66 //---- Fix _maxDate value for better displaying-----
67 // Add at least 5 days
68
69 if(_maxDate.getMonth() == 11) //December
70 {
71 if(_maxDate.getDay() + 5 > getDaysInMonth(_maxDate.getMonth() + 1, _maxDate.getFullYear()))
72 _maxDate.setFullYear(_maxDate.getFullYear() + 1, 1, 5); //The fifth day of next month will be used
73 else
74 _maxDate.setFullYear(_maxDate.getFullYear(), _maxDate.getMonth(), _maxDate.getDate() + 5); //The fifth day of next month will be used
75 }
76 else
77 {
78 if(_maxDate.getDay() + 5 > getDaysInMonth(_maxDate.getMonth() + 1, _maxDate.getFullYear()))
79 _maxDate.setFullYear(_maxDate.getFullYear(), _maxDate.getMonth() + 1, 5); //The fifth day of next month will be used
80 else
81 _maxDate.setFullYear(_maxDate.getFullYear(), _maxDate.getMonth(), _maxDate.getDate() + 5); //The fifth day of next month will be used
82 }
83
84 //--------------------------------------------------
85
86 _gStr = "";
87 _gStr += "</tr><tr>";
88 _thirdRow = "<tr><td> </td>";
89 _dTemp.setFullYear(_minDate.getFullYear(), _minDate.getMonth(), _minDate.getDate());
90 while(Date.parse(_dTemp) <= Date.parse(_maxDate))
91 {
92 if(_dTemp.getDay() % 6 == 0) //Weekend
93 {
94 _gStr += "<td class='GWeekend'><div style='width:24px;'>" + _dTemp.getDate() + "</div></td>";
95 if(Date.parse(_dTemp) == Date.parse(_currentDate))
96 _thirdRow += "<td id='GC_" + (counter++) + "' class='GToDay' style='height:" + (_taskList.length * 21) + "'> </td>";
97 else
98 _thirdRow += "<td id='GC_" + (counter++) + "' class='GWeekend' style='height:" + (_taskList.length * 21) + "'> </td>";
99 }
100 else
101 {
102 _gStr += "<td class='GDay'><div style='width:24px;'>" + _dTemp.getDate() + "</div></td>";
103 if(Date.parse(_dTemp) == Date.parse(_currentDate))
104 _thirdRow += "<td id='GC_" + (counter++) + "' class='GToDay' style='height:" + (_taskList.length * 21) + "'> </td>";
105 else
106 _thirdRow += "<td id='GC_" + (counter++) + "' class='GDay'> </td>";
107 }
108 if(_dTemp.getDate() < getDaysInMonth(_dTemp.getMonth() + 1, _dTemp.getFullYear()))
109 {
110 if(Date.parse(_dTemp) == Date.parse(_maxDate))
111 {
112 _firstRowStr += "<td class='GMonth' colspan='" + (_colSpan + 1) + "'>T" + (_dTemp.getMonth() + 1) + "/" + _dTemp.getFullYear() + "</td>";
113 }
114 _dTemp.setDate(_dTemp.getDate() + 1);
115 _colSpan++;
116 }
117 else
118 {
119 _firstRowStr += "<td class='GMonth' colspan='" + (_colSpan + 1) + "'>T" + (_dTemp.getMonth() + 1) + "/" + _dTemp.getFullYear() + "</td>";
120 _colSpan = 0;
121 if(_dTemp.getMonth() == 11) //December
122 {
123 _dTemp.setFullYear(_dTemp.getFullYear() + 1, 0, 1);
124 }
125 else
126 {
127 _dTemp.setFullYear(_dTemp.getFullYear(), _dTemp.getMonth() + 1, 1);
128 }
129 }
130 }
131 _thirdRow += "</tr>";
132 _gStr += "</tr>" + _thirdRow;
133 _gStr += "</table>";
134 _gStr = _firstRowStr + _gStr;
135 for(i = 0; i < _taskList.length; i++)
136 {
137 _offSet = (Date.parse(_taskList.getFrom()) - Date.parse(_minDate)) / (24 * 60 * 60 * 1000);
138 _dateDiff = (Date.parse(_taskList.getTo()) - Date.parse(_taskList.getFrom())) / (24 * 60 * 60 * 1000) + 1;
139 _gStr += "<div style='position:absolute; top:" + (20 * (i + 2)) + "; left:" + (_offSet * 27 + 204) + "; width:" + (27 * _dateDiff - 1 + 100) + "'><div title='" + _taskList.getTask() + "' class='GTask' style='float:left; width:" + (27 * _dateDiff - 1) + "px;'>" + getProgressDiv(_taskList.getProgress()) + "</div><div style='float:left; padding-left:3'>" + _taskList.getResource() + "</div></div>";
140 _gStr += "<div style='position:absolute; top:" + (20 * (i + 2) + 1) + "; left:5px'>" + _taskList.getTask() + "</div>";
141 }
142 _GanttDiv.innerHTML = _gStr;
143 }
144 }
145 }
146
147 function getProgressDiv(progress)
148 {
149 return "<div class='GProgress' style='width:" + progress + "%; overflow:hidden'></div>"
150 }
151 // GET NUMBER OF DAYS IN MONTH
152 function getDaysInMonth(month, year)
153 {
154
155 var days;
156 switch(month)
157 {
158 case 1:
159 case 3:
160 case 5:
161 case 7:
162 case 8:
163 case 10:
164 case 12:
165 days = 31;
166 break;
167 case 4:
168 case 6:
169 case 9:
170 case 11:
171 days = 30;
172 break;
173 case 2:
174 if (((year% 4)==0) && ((year% 100)!=0) || ((year% 400)==0))
175 days = 29;
176 else
177 days = 28;
178 break;
179 }
180 return (days);
181 }
182 /*----- END OF MY CODE FOR Gantt CHART GENERATOR -----*/

如何使用这段脚本

在你的HTML, ASCX, ASPX或PHP文档的Body部分，把下面几行代码拷贝到你想表示甘特图的地方。

Code

使用var g = new Gantt(document.all.GanttChart);语句指定你要显示的甘特图到命名为"GanttChart"的DIV元素（你可以在body中看到它）。

g.AddTaskDetail()方法添加任务到任务列表。你可以使用AJAX或任何你喜欢的方式来生成这些命令以添加任务的集合。

使用g.Draw()来渲染基于追加到甘特图对象的任务列表的甘特图。

如何改变组件外观

这里笔者定义了一些类用来自定义甘特图的样式，为此提供了全部代码。你可以定义更多的类并且更轻易地改变甘特图控件的外观。

通过改变样式表，并且在代码中添加属性到任务对象，你可以为你自己创建更加智能的甘特图。例如：为任务条设置不同的颜色，漂亮的背景图片，更好的图标提示等等。

样式表

Code

图表

Code

Code

兴趣点

你会先注意到图标运行起来速度很快。

SIcon甘特图是通过Javascript创建的，这意味着你可以在众多的Web开发环境中使用它。我比较喜欢ASP.NET，所以我会把此控件和ASP.NET一起使用。另外，你可以使用AJAX创建更酷的应用。你可以自定义CSS类得到更好看的甘特图。我将试图添加链接到任务用来描述他们的关系，并将显示一个父任务，就像我们在MS Project中看到的一样。

甘特图通过HTML显示，因为它使用的是轻量级结构，所以你可以添加更多的功能到图表。例如，提示、链接、图片等，在JScript中使用一些基本的变化就可以获得。

最后，它是全免费的，编码愉快！

程序下载：

附件: 您所在的用户组无法下载或查看附件

原文地址： http://www.codeproject.com/KB/scripting/SIcon_Gantt_Chart.aspx

（文/dathq 译/崔驰坤出处/博客园）

感谢原创者的辛勤劳动，希望对您有所帮助，转载请注明原出处。

您可能对 [javascript] 的这些文章也感兴趣：

js事件列表

如何实现iframe(嵌入式帧)的自适应高度

JS实现图片的等比缩放

Javascript的IE和Firefox兼容性汇编

使用脚本控制网页Table的显示隐藏(全代码)

甘特图（Javascript实现） - SIcon Gantt Chart

Gb2312转utf-8(vbs js)

效果不错的JavaScript拖拽解决方案

Javascript实例教程(17) 使用字符串函数

用javascript 转换外部链接样式

mzq8293 1分钱个人空间相册性别: 来自: 积分:2 帖子:2 注册: 2008-10-20	2008-10-20 12:33 \| 树型\| 收藏\| 小中大复制帖子链接到剪贴板2F 回复：甘特图（Javascript实现） - SIcon Gantt Chart 厉害不过就目前而言，应用到实际中，还有需要完善的地方啊，比如前置任务连线，里程碑设定，子任务的创建等等，不知道楼主有没有解决的办法了

flydragon1999 个人空间相册性别: 来自: 积分:1 帖子:1 注册: 2008-11-18	2008-11-18 16:18 \| 树型\| 收藏\| 小中大复制帖子链接到剪贴板3F 回复：甘特图（Javascript实现） - SIcon Gantt Chart 好东西，收藏先。有空的时候可以帮你修改下兼容性。

cobra striver 个人空间相册性别: 来自:拼吾爱积分:6811 帖子:6723 注册: 2007-04-09	2008-11-18 17:29 \| 只看楼主树型\| 收藏\| 小中大复制帖子链接到剪贴板4F 回复：甘特图（Javascript实现） - SIcon Gantt Chart 呵呵，感谢啊

拼吾爱程序人生其他编程 javascript 甘特图（Javascript实现） - SIcon Gantt Chart

甘特图（Javascript实现） - SIcon Gantt Chart

甘特图（Javascript实现） - SIcon Gantt Chart

回复：甘特图（Javascript实现） - SIcon Gantt Chart

回复：甘特图（Javascript实现） - SIcon Gantt Chart

回复：甘特图（Javascript实现） - SIcon Gantt Chart

快速回复帖子

拼吾爱程序人生其他编程javascript 甘特图（Javascript实现） - SIcon Gantt Chart

甘特图（Javascript实现） - SIcon Gantt Chart

甘特图（Javascript实现） - SIcon Gantt Chart

回复：甘特图（Javascript实现） - SIcon Gantt Chart

回复：甘特图（Javascript实现） - SIcon Gantt Chart

回复：甘特图（Javascript实现） - SIcon Gantt Chart

快速回复帖子

拼吾爱程序人生其他编程 javascript 甘特图（Javascript实现） - SIcon Gantt Chart