js生成饼图、折线图、柱状图。网上找的代码。 生成结果如图: <HTML xmlns:v> <HEAD> <TITLE> eTable </TITLE> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"><mce:style type="text/css"><!-- body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } .style1 { font-size: 16px; font-weight: bold; filter: Shadow(Color=#333333, Direction=135); } --></mce:style><style type="text/css" mce_bogus="1">body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } .style1 { font-size: 16px; font-weight: bold; filter: Shadow(Color=#333333, Direction=135); }</style></HEAD> <SCRIPT LANGUAGE="JavaScript"> var strRowErr="请检查行数!"; var strColErr="请检查列数!"; function checkInt(str){ if(str==null||str==""||isNaN(str)){ return 0; }else{ str=parseInt(str); if(str<1){ return 0; } } return str; } function checkNum(str){ if(str==null||str==""||isNaN(str)){ return 0; } return str; } function checkStr(str,def){ if(str==null||str==""){ return(def); } return(str); } function createTable(){ var intRow=checkInt(row.value); var intCol=checkInt(col.value); var i,j; if(intRow==0){ alert(strRowErr); row.focus(); return; } if(intCol==0){ alert(strColErr); col.focus(); return; } var intTableRow=dataTable.rows.length; var intTableCol=0; if(intTableRow!=0){ intTableCol=dataTable.rows(0).cells.length; } //alert(intTableRow); if(intRow+1>intTableRow){ //添加行 for(i=intTableRow;i<intRow+1;i++){ addRow(i,intTableCol); } }else{ //删除行 for(i=intTableRow;i>intRow+1;i--){ delRow(i-1); } } intTableRow=intRow+1; if(intCol+1>intTableCol){ //添加列 for(i=0;i<intTableRow;i++){ for(j=intTableCol;j<intCol+1;j++){ addCell(i,j); } } }else{ //删除列 for(i=0;i<intTableRow;i++){ for(j=intTableCol;j>intCol+1;j--){ delCell(i,j-1); } } } } function addRow(rIndex,cols){ dataTable.insertRow(rIndex); var i; for(i=0;i<cols;i++){ addCell(rIndex,i) } } function delRow(rIndex){ dataTable.deleteRow(rIndex); } function addCell(rIndex,cIndex){ var objCell=dataTable.rows(rIndex).insertCell(cIndex); var strStyle=(rIndex==0||cIndex==0)?" style='text-align:center;background-color:#f0f0f0;border:none;'":" style='text-align:right;border:none;'" objCell.bgColor="#ffffff"; objCell.height="21"; objCell.innerHTML="<input type='text' size='8' value='"+rIndex+""+cIndex+"'"+strStyle+" οnmοuseοver='javascript:this.select();'>"; } function delCell(rIndex,cIndex){ dataTable.rows(rIndex).deleteCell(cIndex); } </SCRIPT> <SCRIPT LANGUAGE="JavaScript"> var ct1=new ct() function ct(){ this.ac="green,yellow,red,blue,gray,#f7f7f7".split(",") this.ac="#FF0000,#00FF00,#0000FF,#FFFF00,#00FFFF,#FF00FF,#333333,#666666,#999999,#cccccc".split(",") this.getCss=function(css,k,df){ if(css==null) return def==null ? "" : df var r=new RegExp("(^|)"+k+":([^/;]*)(/;|$)","gi") var a=r.exec(css.replace(/=/g,":").replace(/ /g,"").toLowerCase()) return a==null ? (df==null ? "" : df) : (isNaN(a[2])||a[2]=="" ? a[2] : parseInt(a[2])) } this.bar=function(vList,css){ //柱状图 var l="",a,n,s,hsz,max=0,cx=20,ch var pw=this.getCss(css,"width",500),ph=this.getCss(css,"height",300) if(ph<150||pw<150){ alert("图表区域太小,中断输出!") return } a=vList.split(";") for(var i in a){ a[i]=a[i].split(",") for(var j in a[i]){ if(i>0&&j>0) if(parseInt(a[i][j])>max) max=parseInt(a[i][j]) } } if(max==0) return hsz=(ph-100)/max n=(vList.length-vList.replace(/;/g,"").replace(/,/g,"").length)*20+20 if(pw<n) pw=n l+="<v:rect fillcolor='"+this.getCss(css,"background","white")+"' style='position:absolute;left:0;top:0;width:"+pw+";height:"+ph+"'><v:shadow on=t type=emboss opacity=80% offset='3px,3px' offset2='5px,5px' /></v:rect>" l+="<v:line from="+30+","+(ph-30)+" to="+30+","+10+"><v:stroke startarrow=none endarrow=classic /></v:line>" l+="<v:line from="+30+","+(ph-30)+" to="+(pw-10)+","+(ph-30)+"><v:stroke startarrow=none endarrow=classic /></v:line>" l+="<span style='position:absolute;z-index:3;font:12;left:220;top:10'>"+this.getCss(css,"title")+"</span>" l+="<span style='position:absolute;z-index:3;font:12;left:"+(pw-50)+";top:"+(ph-20)+"'>"+a[0][0]+"</span>" l+="<span style='position:absolute;z-index:3;font:12;left:10;top:10;width:5;word-break:break-all'>"+this.getCss(css,"vname")+"</span>" for(i=0;i<5;i++){ l+="<v:line from="+30+","+(70+i*(ph-100)/5)+" to="+(pw-10)+","+(70+i*(ph-100)/5)+" strokecolor=#c0c0c0><v:stroke dashstyle=dash /></v:line>" l+="<span style='position:absolute;z-index:3;font:12;left:"+10+";top:"+(65+i*(ph-100)/5)+"'>"+(parseInt(max)*(5-i)/5)+"</span>" } for(i in a){ for(j in a[i]){ if(i==0){ if(j>0){ l+="<v:rect fillcolor='"+this.ac[j-1]+"' style='position:absolute;left:"+(j*80-20)+";top:30;width:20;height:20' />" l+="<span style='position:absolute;z-index:3;font:12;left:"+(j*80+5)+";top:35'>"+a[i][j]+"</span>" } } else{ if(j==0) l+="<span style='position:absolute;z-index:3;font:12;left:"+cx+";top:"+(ph-25)+"'>"+a[i][j]+"</span>" else{ ch=a[i][j]*hsz l+="<v:rect title='"+a[i][j]+"' fillcolor='"+this.ac[j-1]+"' style='position:absolute;left:"+cx+";top:"+(ph-30-ch)+";width:20;height:"+ch+"' />" if(this.getCss(css,"showVal")=="t") l+="<span style='position:absolute;z-index:3;font:12;left:"+(cx+3)+";top:"+(ph-42-ch)+"'>"+a[i][j]+"</span>" cx+=20 } } } cx+=20 } return l } this.lines=function(vList,css){ //线图 var l="",a,n,s,hsz,max=0,ch var pw=this.getCss(css,"width",500),ph=this.getCss(css,"height",300) if(ph<150||pw<150){ alert("图表区域太小,中断输出!") return } a=vList.split(";") for(var i in a){ a[i]=a[i].split(",") for(var j in a[i]){ if(i>0&&j>0) if(parseInt(a[i][j])>max) max=parseInt(a[i][j]) } } if(max==0) return hsz=(ph-100)/max // n=a.length*40+40 // if(pw<n) pw=n // l+="<v:rect fillcolor='"+this.getCss(css,"background","white")+"' style='position:absolute;left:0;top:0;width:"+pw+";height:"+ph+"'><v:shadow on=t type=emboss opacity=80% offset='3px,3px' offset2='5px,5px' /></v:rect>"//背景 l+="<v:line from="+30+","+(ph-30)+" to="+30+","+10+"><v:stroke startarrow=none endarrow=classic /></v:line>"//y轴 l+="<v:line from="+30+","+(ph-30)+" to="+(pw-10)+","+(ph-30)+"><v:stroke startarrow=none endarrow=classic /></v:line>"//x轴 l+="<span style='position:absolute;z-index:3;font:12;left:"+(pw-50)+";top:"+(ph-20)+"'>"+this.getCss(css,"xname")+"</span>"//x轴名称 l+="<span style='position:absolute;z-index:3;font:12;left:10;top:10;width:5;word-break:break-all'>"+a[0][0]+"</span>"//y轴名称 l+="<span style='position:absolute;z-index:3;font:12;left:220;top:10'>"+this.getCss(css,"title")+"</span>"//报表标题 for(i=0;i<5;i++){ l+="<v:line from="+30+","+(70+i*(ph-100)/5)+" to="+(pw-10)+","+(70+i*(ph-100)/5)+" strokecolor=#c0c0c0><v:stroke dashstyle=dash /></v:line>"//y轴辅助坐标线 l+="<span style='position:absolute;z-index:3;font:12;left:"+10+";top:"+(65+i*(ph-100)/5)+"'>"+(parseInt(max)*(5-i)/5)+"</span>"//y轴刻度 } for(i in a){ for(j in a[i]){ if(i==0){ if(j>0){ l+="<v:rect fillcolor='"+this.ac[j-1]+"' style='position:absolute;left:"+(j*80-20)+";top:30;width:20;height:20' />"//图例 l+="<span style='position:absolute;z-index:3;font:12;left:"+(j*80+5)+";top:35'>"+a[i][j]+"</span>"//图例说明 } } else{//数据 if(j==0) l+="<span style='position:absolute;z-index:3;font:12;left:"+(i*40)+";top:"+(ph-25)+"'>"+a[i][j]+"</span>"//x轴刻度 else{ ch=a[i][j]*hsz if(i>1){ oh=parseInt(a[i-1][j]*hsz) l+="<v:line from="+((i-1)*40)+","+(ph-oh-30)+" to="+(i*40)+","+(ph-ch-30)+" strokecolor='"+this.ac[j-1]+"' />"//数据折线 } // if(j==1){ l+="<v:line from="+(i*40)+","+(ph-30)+" to="+(i*40)+","+10+" strokecolor=#c0c0c0><v:stroke dashstyle=dash /></v:line>" }//x轴辅助线 / l+="<v:rect title='"+a[i][j]+"' fillcolor='"+this.ac[j-1]+"' style='z-index:3;position:absolute;left:"+(i*40-1)+";top:"+(ph-ch-31)+";width:3;height:"+3+"' />"//数据点 if(this.getCss(css,"showVal")=="t") l+="<span style='position:absolute;z-index:3;font:12;left:"+(i*40-5)+";top:"+(ph-ch-42)+"'>"+a[i][j]+"</span>"//数据值 } } } } return l } this.pie=function(vList,css){ var l="",a,i,j,n,s,amt,dx=0 var pw=this.getCss(css,"width",500),ph=this.getCss(css,"height",300) if(ph<150||pw<150){ alert("图表区域太小,中断输出!") return } a=vList.split(";") n=a.length*170-130 if(pw<n) pw=n l+="<v:rect fillcolor='"+this.getCss(css,"background","white")+"' style='position:absolute;left:0;top:0;width:"+pw+";height:"+ph+"'><v:shadow on=t type=emboss opacity=80% offset='3px,3px' offset2='5px,5px' /></v:rect>" l+="<span style='position:absolute;z-index:3;font:12;left:220;top:10'>"+this.getCss(css,"title")+"</span>" if(a.length==2) dx=pw/2-100 if(a.length==3) dx=pw/2-180 for(i in a){ a[i]=a[i].split(",") amt=0 for(j=1;j<a[i].length;j++){ amt+=parseFloat(a[i][j]) } sa=0 for(j in a[i]){ if(i==0){ if(j>0){ l+="<v:rect fillcolor='"+this.ac[j-1]+"' style='position:absolute;left:"+(j*80-20)+";top:30;width:20;height:20' />" l+="<span style='position:absolute;z-index:3;font:12;left:"+(j*80+5)+";top:35'>"+a[i][j]+"</span>" } } else{ if(j==0){ l+="<span style='position:absolute;z-index:3;font:12;left:"+(i*170-90+dx)+";top:"+(ph-50)+"'>"+a[i][j]+"("+amt+")</span>" } else{ ea=a[i][j]*360/amt+sa if(j==a[i].length-1) ea=0 if(a[i][j]>0) l+=this.getPie(60,sa,ea,"title:"+a[i][j]+";val:"+(parseInt((10000*a[i][j]/amt))/100)+"%;x:"+(i*170-70+dx)+";y:"+(ph/2+10)+";background:"+this.ac[j-1]) sa=ea } } } } return l } this.getPie=function(r,sa,ea,css){ var sf,ef,sx,sy,ex,ey var title=this.getCss(css,"title"),val=this.getCss(css,"val") var x=parseInt(this.getCss(css,"x",0)),y=parseInt(this.getCss(css,"y",0)) sf=Math.PI*(sa/180) ef=Math.PI*(ea/180) sy=parseInt(r*Math.sin(sf)) sx=parseInt(r*Math.cos(sf)) ey=parseInt(r*Math.sin(ef)) ex=parseInt(r*Math.cos(ef)) s="m0,0l"+sx+","+sy+"ar-"+r+",-"+r+","+r+","+r+","+ex+","+ey+","+sx+","+sy+",l0,0xe" l="<v:shape path='"+s+"' title='"+title+"' coordsize=1,1 style='position:absolute;width:1;height:1;left:"+this.getCss(css,"x","0")+";top:"+this.getCss(css,"y","0")+"' fillcolor='"+this.getCss(css,"background","white")+"' />" if(ef==0) ef=270 var cx=(r+10)*Math.cos((sf+ef)/2),cy=(r+10)*Math.sin((sf+ef)/2) l+="<span style='position:absolute;z-index:3;font:12;left:"+(cx+x-10)+";top:"+(cy+y-5)+"'>"+val+"</span>" return l } this.draw=function(vList,css){ var l,type=this.getCss(css,"type") if(type=="pie") l=this.pie(vList,css) else if(type=="lines") l=this.lines(vList,css) else l=this.bar(vList,css) return l } } function createView(flag){ var i,j; var strTableName=tableName.value==""?"数据图表":tableName.value; var strXName=xName.value==""?"X轴":xName.value; var strYName=yName.value==""?"Y轴":yName.value; var intTableRow=dataTable.rows.length; var intTableCol=dataTable.rows(0).cells.length; var arrData=new Array(); for(i=0;i<intTableCol;i++){ arrData[i]=""; } var strPara=""; var strStyle=""; arrData[0]=","+strXName; for(i=0;i<intTableRow;i++){ if(i!=0){ arrData[0]+=","; arrData[0]+=checkStr(dataTable.rows(i).cells(0).children(0).value,"项目"+i); } for(j=1;j<intTableCol;j++){ arrData[j]+=","; if (i==0){ arrData[j]+=checkStr(dataTable.rows(i).cells(j).children(0).value,j); }else{ arrData[j]+=checkNum(dataTable.rows(i).cells(j).children(0).value); } } } strPara=arrData[0].substr(1); for(i=1;i<intTableCol;i++){ strPara+=";"; strPara+=arrData[i].substr(1); } strStyle="type:"+flag+";showVal:t;vname:"+strYName+";title:"+strTableName; try{ var win=window.open("","sx1123","resizable=yes,scrollbars=yes"); var strHTML=""; strHTML+="<html xmlns:v><mce:style><!-- v//:*{behavior:url(#default#VML)} --></mce:style><style mce_bogus="1">v//:*{behavior:url(#default#VML)}</style>"; strHTML+="<body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>"; strHTML+=ct1.draw(strPara,strStyle); strHTML+="</body></html>"; win.document.open(); win.document.write(strHTML); win.document.close(); win.focus(); }catch(e){ msg.innerHTML="<font color='#ff0000'>装载数据失败!</font>"; } } </SCRIPT> <BODY> <div id="msg" align="center"></div> <table width="100%" height="100%" border="0" align="left" cellpadding="0" cellspacing="0"> <tr> <td align="left" height="50" bgcolor="#CCCCCC"> <font size="6" color="#000000" style="FILTER: shadow(color=#f7f7f7,direction=135); HEIGHT: 24px"><b>图表生成器</b></font> V0.6 beta </td> </tr> <tr> <td align="left" height="25" bgcolor="#f7f7f7"> 报表数据行数<input name="row" type="text" style="text-align:center;" mce_style="text-align:center;" value="1" size="4"οnmοuseοver='javascript:this.select();'> 报表数据列数<input name="col" type="text" style="text-align:center;" mce_style="text-align:center;" value="1" size="4"οnmοuseοver='javascript:this.select();'> <input type="button" name="bt1" value="报表生成" οnclick="javascript:createTable();"> </td> </tr> <tr> <td align="center"> <input type="text" name="tableName" value="图表名称" style="text-align:center;width:100%;border:none;"onMouseOver='javascript:this.select();'> <table id="dataTable" border="0" cellspacing="1" cellpadding="1" bgcolor="#000000" align="center"> <tr> <td bgcolor="#F0F0F0" width="" height="21" align="center"> </td> <td bgcolor="#ffffff" width="" height="21"><input type="text" value="01" style="text-align:center;border:none;background-color:#f0f0f0;" mce_style="text-align:center;border:none;background-color:#f0f0f0;"size='8' οnmοuseοver='javascript:this.select();'></td> </tr> <tr> <td bgcolor="#ffffff" width="" height="21"><input type="text" value="10" style="text-align:center;border:none;background-color:#f0f0f0;" mce_style="text-align:center;border:none;background-color:#f0f0f0;"size='8' οnmοuseοver='javascript:this.select();'></td> <td bgcolor="#ffffff" width="" height="21"><input type="text" value="11" style="text-align:right;border:none;" mce_style="text-align:right;border:none;"size='8' οnmοuseοver='javascript:this.select();'></td> </tr> </table> </td> </tr> <tr> <td height="50" align="center" bgcolor="#999999"><BR> X轴<input type="text" name="xName" value="x轴" size="10" style="text-align:center;" mce_style="text-align:center;"οnmοuseοver='javascript:this.select();'> y轴<input type="text" name="yName" value="y轴" size="10" style="text-align:center;" mce_style="text-align:center;"οnmοuseοver='javascript:this.select();'><BR> <input type="button" name="bt1" value="柱状图生成" οnclick="javascript:createView('bar');"> <input type="button" name="bt1" value="折线图生成" οnclick="javascript:createView('lines');"> <input type="button" name="bt1" value="饼图生成" οnclick="javascript:createView('pie');"> </td> </tr> </table> </BODY> </HTML>