谷歌甘特图

参考下这个：

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