js实现甘特图

转载 2007年10月10日 13:05:00

 <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>  
   
 

html js万能甘特图

  • 2016年08月29日 16:54
  • 10.83MB
  • 下载

js实现甘特图显示

  • 2013年08月15日 00:36
  • 33KB
  • 下载

利用JSGrid创建甘特图

话不多说先上图 目前使用数据为程序自动生成的测试数据,如果要读取sharepoint列表或自定义数据源,可以修改griddata类中的方法。 点击进入代码下载画面:JSGrid甘特图...
  • yun_liang1028
  • yun_liang1028
  • 2011年03月19日 22:09
  • 7600

js甘特图 甘特图

  • 2009年08月05日 11:18
  • 2.21MB
  • 下载

JQuery.Gantt(甘特图) 开发指南

JQuery.Gantt是一个开源的基于JQuery库的用于实现甘特图效果的可扩展功能的JS组件库。 源码下载      https://github.com/mbiela...
  • huanglgln
  • huanglgln
  • 2014年12月22日 14:15
  • 3732

js+table实现简单的甘特图显示,简单但很实用

  • 2013年06月02日 11:47
  • 33KB
  • 下载

免费js版gantt甘特图javascript控件集合

  • 2016年03月30日 16:23
  • 10.83MB
  • 下载

Jquery 甘特图 插件 jQuery.Gantt

http://taitems.github.io/jQuery.Gantt/
  • z69183787
  • z69183787
  • 2014年11月25日 09:40
  • 12786

13个js版gantt甘特图控件集合

  • 2015年01月23日 11:45
  • 10.83MB
  • 下载

燃尽图,甘特图,鱼骨图

1. 燃尽图        燃尽图(burn down chart)是在项目完成之前,对需要完成的工作的一种可视化表示。燃尽图有一个Y轴(工作)和X轴(时间)。理想情况下,该图表是一个向下的曲线,随...
  • p_ython
  • p_ython
  • 2017年07月05日 08:17
  • 948
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js实现甘特图
举报原因:
原因补充:

(最多只允许输入30个字)