js生成饼图、折线图、柱状图

来源：互联网发布：重庆人口普查数据编辑：程序博客网时间：2024/04/28 14:09

js生成饼图、折线图、柱状图。网上找的代码。

生成结果如图：

<HTML xmlns:v><HEAD><TITLE> eTable </TITLE><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><mce:style type="text/css"></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+" onmouseover='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></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"onmouseover='javascript:this.select();'>报表数据列数<input name="col" type="text" style="text-align:center;" mce_style="text-align:center;" value="1" size="4"onmouseover='javascript:this.select();'><input type="button" name="bt1" value="报表生成" onclick="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' onmouseover='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' onmouseover='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' onmouseover='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;"onmouseover='javascript:this.select();'> y轴<input type="text" name="yName" value="y轴" size="10" style="text-align:center;" mce_style="text-align:center;"onmouseover='javascript:this.select();'><BR><input type="button" name="bt1" value="柱状图生成" onclick="javascript:createView('bar');"> <input type="button" name="bt1" value="折线图生成" onclick="javascript:createView('lines');"> <input type="button" name="bt1" value="饼图生成" onclick="javascript:createView('pie');"></td></tr></table></BODY></HTML>