简易甘特图 .net javascript

View Code

  1 <html>
  2
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
  5 <title>New Page 1</title>
  6 </head>
  7 <script>
  8     /* --------- SICON GANTT CHART -----------------------------------------------------------
  9      * AUTHOR        : Dathq - ICT Service Engineering Jsc, - dathq@ise.com.vn
10      * LICENSE        : Free
11      * DESCRIPTION    : Create a new task item with these info
12      *        - from: start date (format: mm/dd/dddd)
13      *        - to: deadline of task (format: mm/dd/dddd)
14      *        - task: name of the task, what has to be solved (not includes ')
15      *        - resource: who have to solve this task (not includes ')
16      *        - progress: how is it going? (format: integer value from 0 to 100, not includes %)
17      *----------------------------------------------------------------------------------------*/
18     function Task(from, to, task, resource, progress)
19     {
20         var _from = new Date();
21         var _to = new Date();
22         var _task = task;
23         var _resource = resource;
24         var _progress = progress;
25         var dvArr = from.split('/');
26         _from.setFullYear(parseInt(dvArr[2], 10), parseInt(dvArr[0], 10) - 1, parseInt(dvArr[1], 10));
27         dvArr = to.split('/');
28         _to.setFullYear(parseInt(dvArr[2], 10), parseInt(dvArr[0], 10) - 1, parseInt(dvArr[1], 10));
29
30         this.getFrom = function(){ return _from};
31         this.getTo = function(){ return _to};
32         this.getTask = function(){ return _task};
33         this.getResource = function(){ return _resource};
34         this.getProgress = function(){ return _progress};
35     }
36
37     function Gantt(gDiv)
38     {
39         var _GanttDiv = gDiv;
40         var _taskList = new Array();
41         this.AddTaskDetail = function(value)
42         {
43             _taskList.push(value);
44
45         }
46         this.Draw = function()
47         {
48             var _offSet = 0;
49             var _dateDiff = 0;
50             var _currentDate = new Date();
51             var _maxDate = new Date();
52             var _minDate = new Date();
53             var _dTemp = new Date();
54             var _firstRowStr = "<table border=1 style='border-collapse:collapse'><tr><td rowspan='2' width='200px' style='width:200px;'><div class='GTaskTitle' style='width:200px;'>任务名称</div></td>";
55             var _thirdRow = "";
56             var _gStr = "";
57             var _colSpan = 0;
58             var counter = 0;
59
60             _currentDate.setFullYear(_currentDate.getFullYear(), _currentDate.getMonth(), _currentDate.getDate());
61             if(_taskList.length > 0)
62             {
63                 _maxDate.setFullYear(_taskList[0].getTo().getFullYear(), _taskList[0].getTo().getMonth(), _taskList[0].getTo().getDate());
64                 _minDate.setFullYear(_taskList[0].getFrom().getFullYear(), _taskList[0].getFrom().getMonth(), _taskList[0].getFrom().getDate());
65                 for(i = 0; i < _taskList.length; i++)
66                 {
67                     if(Date.parse(_taskList[i].getFrom()) < Date.parse(_minDate))
68                         _minDate.setFullYear(_taskList[i].getFrom().getFullYear(), _taskList[i].getFrom().getMonth(), _taskList[i].getFrom().getDate());
69                     if(Date.parse(_taskList[i].getTo()) > Date.parse(_maxDate))
70                         _maxDate.setFullYear(_taskList[i].getTo().getFullYear(), _taskList[i].getTo().getMonth(), _taskList[i].getTo().getDate());
71                 }
72
73                 //---- Fix _maxDate value for better displaying-----
74                 // Add at least 5 days
75
76                 if(_maxDate.getMonth() == 11) //December
77                 {
78                     if(_maxDate.getDay() + 5 > getDaysInMonth(_maxDate.getMonth() + 1, _maxDate.getFullYear()))
79                         _maxDate.setFullYear(_maxDate.getFullYear() + 1, 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                 else
84                 {
85                     if(_maxDate.getDay() + 5 > getDaysInMonth(_maxDate.getMonth() + 1, _maxDate.getFullYear()))
86                         _maxDate.setFullYear(_maxDate.getFullYear(), _maxDate.getMonth() + 1, 5); //The fifth day of next month will be used
87                     else
88                         _maxDate.setFullYear(_maxDate.getFullYear(), _maxDate.getMonth(), _maxDate.getDate() + 5); //The fifth day of next month will be used
89                 }
90
91                 //--------------------------------------------------
92
93                 _gStr = "";
94                 _gStr += "</tr><tr>";
95                 _thirdRow = "<tr><td> </td>";
96                 _dTemp.setFullYear(_minDate.getFullYear(), _minDate.getMonth(), _minDate.getDate());
97                 while(Date.parse(_dTemp) <= Date.parse(_maxDate))
98                 {
99                     if(_dTemp.getDay() % 6 == 0) //Weekend
100                     {
101                         _gStr += "<td class='GWeekend'><div style='width:24px;'>" + _dTemp.getDate() + "</div></td>";
102                         if(Date.parse(_dTemp) == Date.parse(_currentDate))
103                             _thirdRow += "<td id='GC_" + (counter++) + "' class='GToDay' style='height:" + (_taskList.length * 21) + "'> </td>";
104                         else
105                             _thirdRow += "<td id='GC_" + (counter++) + "' class='GWeekend' style='height:" + (_taskList.length * 21) + "'> </td>";
106                     }
107                     else
108                     {
109                         _gStr += "<td class='GDay'><div style='width:24px;'>" + _dTemp.getDate() + "</div></td>";
110                         if(Date.parse(_dTemp) == Date.parse(_currentDate))
111                             _thirdRow += "<td id='GC_" + (counter++) + "' class='GToDay' style='height:" + (_taskList.length * 21) + "'> </td>";
112                         else
113                             _thirdRow += "<td id='GC_" + (counter++) + "' class='GDay'> </td>";
114                     }
115                     if(_dTemp.getDate() < getDaysInMonth(_dTemp.getMonth() + 1, _dTemp.getFullYear()))
116                     {
117                         if(Date.parse(_dTemp) == Date.parse(_maxDate))
118                         {
119                             _firstRowStr += "<td class='GMonth' colspan='" + (_colSpan + 1) + "'>" + _dTemp.getFullYear() + "年" + (_dTemp.getMonth() + 1) + "月</td>";
120                         }
121                         _dTemp.setDate(_dTemp.getDate() + 1);
122                         _colSpan++;
123                     }
124                     else
125                     {
126                         _firstRowStr += "<td class='GMonth' colspan='" + (_colSpan + 1) + "'>" + _dTemp.getFullYear() +"年" +(_dTemp.getMonth() + 1) + "月</td>";
127                         _colSpan = 0;
128                         if(_dTemp.getMonth() == 11) //December
129                         {
130                             _dTemp.setFullYear(_dTemp.getFullYear() + 1, 0, 1);
131                         }
132                         else
133                         {
134                             _dTemp.setFullYear(_dTemp.getFullYear(), _dTemp.getMonth() + 1, 1);
135                         }
136                     }
137                 }
138                 _thirdRow += "</tr>";
139                 _gStr += "</tr>" + _thirdRow;
140                 _gStr += "</table>";
141                 _gStr = _firstRowStr + _gStr;
142                 for(i = 0; i < _taskList.length; i++)
143                 {
144                     _offSet = (Date.parse(_taskList[i].getFrom()) - Date.parse(_minDate)) / (24 * 60 * 60 * 1000);
145                     _dateDiff = (Date.parse(_taskList[i].getTo()) - Date.parse(_taskList[i].getFrom())) / (24 * 60 * 60 * 1000) + 1;
146                     _gStr += "<div style='position:absolute; top:" + (20 * (i + 2)) + "; left:" + (_offSet * 27 + 204) + "; width:" + (27 * _dateDiff - 1 + 100) + "'><div title='" + _taskList[i].getTask() + "' class='GTask' style='float:left; width:" + (27 * _dateDiff - 1) + "px;'>" + getProgressDiv(_taskList[i].getProgress()) + "</div><div style='float:left; padding-left:3'>" + _taskList[i].getResource() + "</div></div>";
147                     _gStr += "<div style='position:absolute; top:" + (20 * (i + 2) + 1) + "; left:5px'>" + _taskList[i].getTask() + "</div>";
148                 }
149                 _GanttDiv.innerHTML = _gStr;
150             }
151         }
152     }
153
154     function getProgressDiv(progress)
155     {
156         return "<div class='GProgress' title='已完成" + progress + "%' style='width:" + progress + "%; overflow:hidden'></div>"
157     }
158     // GET NUMBER OF DAYS IN MONTH
159     function getDaysInMonth(month, year)
160     {
161
162         var days;
163         switch(month)
164         {
165             case 1:
166             case 3:
167             case 5:
168             case 7:
169             case 8:
170             case 10:
171             case 12:
172                 days = 31;
173                 break;
174             case 4:
175             case 6:
176             case 9:
177             case 11:
178                 days = 30;
179                 break;
180             case 2:
181                 if (((year% 4)==0) && ((year% 100)!=0) || ((year% 400)==0))
182                     days = 29;
183                 else
184                     days = 28;
185                 break;
186         }
187         return (days);
188     }
189     /*----- END OF MY CODE FOR Gantt CHART GENERATOR -----*/
190 </script>
191 <style>
192     /*----- SICON GANTT CHART STYLE CLASSES --------------------------
193      * DESCRIPTION    : Theses class is required for SIcon Gantt Chart
194      * NOTE            : Should change the color, the text style only
195      *----------------------------------------------------------------*/
196     .Gantt
197     {
198         font-family:tahoma, arial, verdana;
199         font-size:11px;
200     }
201
202     .GTaskTitle
203     {
204         font-family:tahoma, arial, verdana;
205         font-size:11px;
206         font-weight:bold;
207     }
208
209     .GMonth
210     {
211         padding-left:5px;
212         font-family:tahoma, arial, verdana;
213         font-size:11px;
214         font-weight:bold;
215     }
216
217     .GToday
218     {
219         background-color: yellow;
220     }
221
222     .GWeekend
223     {
224         font-family:tahoma, arial, verdana;
225         font-size:11px;
226         background-color:#b1b1b1;
227         text-align:center;
228     }
229
230     .GDay
231     {
232         font-family:tahoma, arial, verdana;
233         font-size:11px;
234         text-align:center;
235     }
236
237     .GTask
238     {
239         border-top:1px solid #CACACA;
240         border-bottom:1px solid #CACACA;
241         height:14px;
242         background-color:#5E94A2;
243     }
244
245     .GProgress
246     {
247         background-color:green;
248         height:14px;
249         overflow: hidden;
250     }
251 </style>
252 <body>
253     <h3>Diagram</h3>
254     <div style="position:relative" class="Gantt" id="GanttChart"></div>
255 </body>
256 <script>
257     var g = new Gantt(document.all.GanttChart);
258     g.AddTaskDetail(new Task('12/5/2012', '12/19/2012', '张盼测试任务 1 1(这里支持HTML标签)', '', 100));
259     g.AddTaskDetail(new Task('12/16/2012', '12/19/2012', '... 张盼测试任务 1.1', '', 30));
260     g.AddTaskDetail(new Task('12/12/2012', '3/12/2012', '张盼测试任务 2', '', 60));
261     g.AddTaskDetail(new Task('12/11/2012', '12/16/2012', '张盼测试任务 3', '', 50));
262     g.AddTaskDetail(new Task('12/11/2012', '12/19/2012', '<b>张盼测试任务 1 1</b>', '', 50));
263     g.AddTaskDetail(new Task('12/16/2012', '12/19/2012', '... 张盼测试任务 1.1', '', 30));
264     g.AddTaskDetail(new Task('12/12/2012', '3/12/2012', '张盼测试任务 2', '', 60));
265     g.AddTaskDetail(new Task('12/11/2012', '12/16/2012', '<i>张盼测试任务 3<i>', '', 50));
266     g.AddTaskDetail(new Task('12/11/2012', '12/19/2012', '<b>张盼测试任务 1 1</b>', '', 50));
267     g.AddTaskDetail(new Task('12/16/2012', '12/19/2012', '... 张盼测试任务 1.1', '', 30));
268     g.AddTaskDetail(new Task('12/12/2012', '3/12/2012', '张盼测试任务 2', 'Hanhnd', 60));
269     g.AddTaskDetail(new Task('12/11/2012', '12/16/2012', '<i>张盼测试任务 3<i>', 'Dathq', 50));
270
271     g.AddTaskDetail(new Task('12/11/2012', '12/19/2012', '<b>张盼测试任务 1 1</b>', 'Dathq', 50));
272     g.AddTaskDetail(new Task('12/16/2012', '12/19/2012', '... 张盼测试任务 1.1', 'Dathq, Thanhdo', 30));
273     g.AddTaskDetail(new Task('12/12/2012', '3/12/2012', '张盼测试任务 2', 'Hanhnd', 60));
274     g.AddTaskDetail(new Task('1/1/2013', '1/6/2013', '<i>张盼测试任务 3<i>', 'Dathq', 50));
275
276     g.Draw();
277 </script>
278 </html>