zoukankan      html  css  js  c++  java

  • 简易甘特图 .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='200px;'><div class='GTaskTitle' style='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>&nbsp;</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='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) + "'>&nbsp;</td>";
    104                         else
    105                             _thirdRow += "<td id='GC_" + (counter++) + "' class='GWeekend' style='height:" + (_taskList.length * 21) + "'>&nbsp;</td>";
    106                     }
    107                     else
    108                     {
    109                         _gStr += "<td class='GDay'><div style='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) + "'>&nbsp;</td>";
    112                         else
    113                             _thirdRow += "<td id='GC_" + (counter++) + "' class='GDay'>&nbsp;</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) + "; " + (27 * _dateDiff - 1 + 100) + "'><div title='" + _taskList[i].getTask() + "' class='GTask' style='float:left; " + (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='" + 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>
  • 相关阅读:
    欧拉图
    hdu2544 迪杰斯特拉题目优化
    迪杰斯特拉--数组模拟邻接表优化
    快速幂
    四叉树 bnuoj
    逆康拓展开展开
    全排列 STL
    魔板拼图
    「luogu4366」最短路
    「国家集训队」稳定婚姻
  • 原文地址：https://www.cnblogs.com/zhangpan1244/p/2851155.html
Copyright © 2011-2022 走看看