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