js实现甘特图

 <script   language=javascript>  
  /**  
    *   Title:                 甘特图  
    *   Description:     Javascript中使用表格实现甘特图  
    *   Copyright:         Copyright   (c)   2002  
    *   Company:             weide  
    *   @author               weidegong  
    *   @version             1.0  
    *   evaluation:       用表格实现不可行，准备使用SVG～～  
  **/  
  function   gante(){  
  //定义公用属性  
  this.Data;  
  this.Head=['编号','任务名称','负责人','开始时间','结束时间'];  
  this.toShow;  
  this.StartDate=new   Date();  
  this.EndDate=new   Date();  
  this.DayWidth=6;  
   
  //定义私有属性  
  var   dateMain;//主要时间  
  var   dateSub;//次要时间  
   

   this.setDate=initDate;  
  this.getShow=drawingGante;  
   
  //定义方法  
                  function   initDate(){  
                      var   start=new   Date(),end=new   Date(),t;  
                      for(var   rs   in   this.Data){  
                          for(var   i=3;i<=4;i++){  
                              t=getStrDay(this.Data[rs][i]);  
                              if(t.getTime()>end.getTime())   end=t;  
                              if(t.getTime()<start.getTime())start=t;  
                          }  
                      }  
   
                      this.StartDate=start;  
                      this.EndDate=end;  
    
                  }  
   
       //定义方法   ，画干特图
  function   drawingGante(){  
                                  var     outxt=""  
  outxt+="<table     border=1     width=100%     cellspacing=1     cellpadding=0   bordercolor=#000000>"  
  outxt+="<tr><th   align=center><font     color=#FFFFFF>甘特图</font></th></tr><tr><th><table     border=0     width=100%     cellspacing=1     cellpadding=0>"  
   
  //输出表头  
  outxt+="<tr>";  
  for(var   obj   in   this.Head)  
  outxt+="<td   nowrap>"+this.Head[obj]+"</td>";  
   
  //输出坐标系  
  outxt+="<th><table     border=0     width=100%     cellspacing=1     cellpadding=0>";  
   
  outxt+="<tr><th>"+showYearMonth(this.StartDate,this.EndDate,this.DayWidth)+"</th></tr>";  
   
  outxt+="</table></th>"  
   
  //输出数据内容  
  for(var   rs   in   this.Data){  
  outxt+="<tr>"  
  for(var   fd   in   this.Data[rs]){  
  outxt+="<td   nowrap>"+this.Data[rs][fd]+"</td>"  
  }  
   
  //生成甘特图  
  outxt+="<td>"  
   
  var   tBegin=getStrDay(this.Data[rs][3]);  
  var   tEnd=getStrDay(this.Data[rs][4]);  
  //alert(tBegin.toLocaleString()+"-->"+tEnd.toLocaleString());continue;  
  outxt+=setMonthShow(this.StartDate,this.EndDate,this.DayWidth,tBegin,tEnd   );   //this.StartDate,this.EndDate：干特图起始时间          ，tBegin,tEnd：当前任务起始时间，this.DayWidth：6
   
  outxt+="</td>"      
  outxt+="</tr>"  
  }  
   
   
  outxt+="</table></th></tr></table>"  
  return   outxt;  
  }  
   
  }  
   
  ///  把时间到精确到毫秒
  function   getStrDay(value){  
  var   arrDate   =   value.split("-");  
  var   dateOK   =   new   Date(arrDate[0],arrDate[1]-1,arrDate[2],0,0,0,0);  
  return   dateOK;  
  }  
 
 
 ///计算两个日期之间相差毫秒数
  function   getDays(day1,day2){  
  var   days=0;  
  try{  
  days=(day1.getTime()-day2.getTime())/(1000*24*3600)  
  if(days<0)   days=-days;  
  }catch(e){}  
   
  return   days;  
  }  
   
 //主要函数之一  
  function   setMonthShow(start,end,width,tBegin,tEnd){  
  var   show="<table     border=1         cellspacing=0   bordercolor=#F89807     cellpadding=0   style=/"height:100%;width:100%;word-break:break-all/"><tr>";  
  var   dateCur=start;  
  var   dateNext;//下一个时间  
  var   widthTD;  
  var   bFlag=0;  
  var   styleGante="   style=/"color:#000;background-color:#00007f/"   ";  
  while(1){  
  dateNext=getNextMonth(dateCur);  
  if(dateNext.getTime()>end.getTime())   dateNext=end;  
  widthTD=getDays(dateCur,dateNext)*width;  
   
  var   setColor="";  
   
  if(   isIn(dateCur,tBegin,tEnd)   ){  
  setColor+="   style=/"color:#000;background-color:#00007f/"   ";  
  //任务开始处  
  if(bFlag++==0){  
  var   monthStart=new   Date(dateCur.getYear(),dateCur.getMonth(),1   );  
  var   tmp=getDays(monthStart,dateCur)*100/30;  
  show+="<td   width="+widthTD+"px>"  
  show+="<table     height=100%   width=100%   border=0><tr><td   width="+tmp+"%></td><td   "+styleGante+"   width="+(100-tmp)+"%></td></tr></table>"  
  show+="</td>"  
  }else   if(dateCur.getYear()==tEnd.getYear()   &&   dateCur.getMonth()==tEnd.getMonth()   ){  
   
                                                  //任务结束处  
  dateCur=tEnd;  
  var   monthStart=new   Date(dateCur.getYear(),dateCur.getMonth(),1   );  
  var   tmp=getDays(monthStart,dateCur)*100/30;  
  show+="<td   width="+widthTD+"px>"  
  show+="<table     height=100%   width=100%   border=0><tr><td     "+styleGante+"   width="+tmp+"%></td><td   width="+(100-tmp)+"%></td></tr></table>"  
  show+="</td>"  
  }else{  
  show+="<td   width="+widthTD+"px   "+   styleGante   +   "></td>"  
  }  
  }else{  
  show+="<td   width="+widthTD+"px   >&nbsp;</td>"  
  }  
   
  //show+="<td   width="+widthTD+"px   "+   setColor   +   "></td>"  
   
  if(dateNext.getTime()==end.getTime())break;  
  dateCur=dateNext;  
  }  
   
  show+="</tr></table>"  
   
  return   show;  
  }  
 
  ///画年份表格和月份表格
 ///width=6
 ///调getMonthShow画月份表格
  function   showYearMonth(start,end,width){  
  var   show="<table     border=0         cellspacing=1   width=100%   cellpadding=0   height=100%   width=100%><tr>";  
  var   dateCur=start;  
  var   dateNext;//下一个时间  
  var   widthTD;  
  while(dateCur.getYear()<=end.getYear()){  
  if(dateCur.getYear()==end.getYear())   dateNext=end;  
  else  
  dateNext=new   Date((dateCur.getYear()+1),0,1);  
   
  widthTD=getDays(dateCur,dateNext)*width;  
  show+="<td   width="+widthTD+"px>";  
   
  show+="<table   border=/"1/"   cellspacing=/"0/"     width=100%   height=100%   bordercolor=#F89807><tr><td>"+dateCur.getYear()+"</td></tr>";  
  show+="<tr><td>"+getMonthShow(dateCur,dateNext,width)+"</td></tr>";  
  show+="</table>";  
   
  show+="</td>"  
   
  if(dateCur.getYear()==dateNext.getYear())   break;  
  dateCur=dateNext;  
   
  }  

  show+="</tr></table>"  
  return   show;  
  }  
   
  function   getYearShow(start,end,width){  
  var   show="<table     border=1         cellspacing=0     bordercolor=#F89807   cellpadding=0   style=/"height:100%;width:100%/"><tr>";  
  var   dateCur=start;  
  var   dateNext;//下一个时间  
  var   widthTD;  
  while(dateCur.getYear()<=end.getYear()){  
  if(dateCur.getYear()==end.getYear())   dateNext=end;  
  else  
  dateNext=new   Date((dateCur.getYear()+1),0,1);  
   
  widthTD=getDays(dateCur,dateNext)*width;  
  show+="<td   width="+widthTD+"px>"+dateCur.getYear()+"</td>"  
   
  if(dateCur.getYear()==dateNext.getYear())   break;  
  dateCur=dateNext;  
   
  }  
   
  show+="</tr></table>"  
  return   show;  
  }  
  
  ///画月份表格
 ///width=6
  function   getMonthShow(start,end,width,type){  
  var   show="<table     border=1         cellspacing=0   bordercolor=#F89807   height=100%   width=100%   cellpadding=0   style=/"word-break:break-all/"><tr>";  
  var   dateCur=start;  
  var   dateNext;//下一个时间  
  var   widthTD;  
  while(1){  
  dateNext=getNextMonth(dateCur);  
  if(dateNext.getTime()>end.getTime())   dateNext=end;  
  widthTD=getDays(dateCur,dateNext)*width;  
   
  var   nMonth=dateCur.getMonth();  
  if(nMonth==11)   nMonth=12;  
  else   nMonth++;  
   
  show+="<td   width="+widthTD+"px>"+nMonth+"</td>"  
   
  if(dateNext.getTime()==end.getTime())break;  
  dateCur=dateNext;  
  }  
  show+="</tr></table>"  
  return   show;  
  }  
   
 ///获取下个月开始日期
  function   getNextMonth(dateCur){  
  var   next;  
  var   nMonth=dateCur.getMonth();  
  if(nMonth==11){  
  next=new   Date((dateCur.getYear()+1),0,1)  
  }else{  
  next=new   Date(dateCur.getYear(),(dateCur.getMonth()+1),1)  
  }  
  return   next;  
  }  
 
 ///判断日期是否在任务开始时间与结束时间之内
  function   isIn(cur,begin,end){  
      for(var   i=1,t=cur;t.getMonth()==cur.getMonth();i++){  
          t=new   Date(cur.getYear(),cur.getMonth(),i);  
          if(t.getTime()>begin   &&   t.getTime()<end)   return   true;  
      }  
      return   false;  
  }  
  </script>  
   

  <html>  
  <head>  
  <meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312">  
  <title>甘特图</title>  
   
  <style>  
  th{color:#FFF;background-color:#F89807;}  
  td{color:#000;background-color:#FDEDCC;height:16}  
  input,textarea,th,td{font-size:9pt}  
  </style>  
   
  <script   language=javascript   src="/comDB/gante.js"></script>  
  </head>  
  <body   onload="show.innerHTML=gt.getShow()">  
  <script   language=javascript>  
  var   gt=new   gante();  
   
  gt.Data=[[1,2,3,'2002-1-1','2002-2-8'],[2,3,4,'2002-3-4','2002-10-20']];  
   
  gt.setDate();  
  </script>  
   
  <div   id=show></div>  
   
  </body>  
  </html>