<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 οnlοad="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>