Question

自定义甘特图火狐浏览器不兼容的问题怎么解决wo

我使用的甘特图是自定义的甘特图，在谷歌上面可以显示成功，但是在火狐上面就不能显示成功了，提示图像类型不支持，请问大神是怎么回事？这是甘特图jsp页面的代码function gante() { var time = new Date().getTime(); $("#divvv").html('<div id="charts_Pie3D" style="float:left;width:100%;height:100%; margin- top:8px;border:#B4B3B3 solid 1px;"></div>'); var second = '${seconds}'; var secondChart = new FusionCharts( "${ctxStatic}/echarts-2.2.6/chart/Gantt.swf", "charts_Pie3D_idA"+time, "99%","99%", "0", "1"); if(second!=""){ secondChart.setDataXML(second); } secondChart.render("charts_Pie3D"); $("#scgtt").hide(); $("#returnList").show(); }图1这是在谷歌浏览器上面展示的效果图2是在火狐浏览器上面展示的效果





Answer 1

参考下这个：

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