JavaScript实现折线图、饼图、柱状图

1、.;JavaScript实现 折线图、饼图、柱状图JavaScript函数之折线图 - scriptlanguage=javascript functiontable2(total,table_x,table_y,all_width,all_height,line_no) varline_color=#69f;； varleft_width=70;； vartotal_no=total1.length vartemp1,temp2,temp3 temp1=0;； for(vari=1;；itotal_no;；i+) for(varj=1;；j=line_no;；j+) if(temp1tota

2、lji) temp1=totalji;； temp1=parseInt(temp1);； if(temp19) temp2=temp1.toString().substr(1,1);； if(temp24) temp3=(parseInt(temp1/(Math.pow(10,(temp1.toString().length-1)+1)*Math.pow(10,(temp1.toString().length-1);； else temp3=(praseInt(temp1/(Math.pow(10,(temp1.toString().length-1)+0.5)*Math.pow(10,(te

3、mp1.toString().length-1) else if(temp14) emp3=10;； else temp3=5;； temp4=temp3;； document.write(v:rectid=_x0000_s1027alt=style=position:absolute;；left:+(table_x+left_width)+px;；top:+table_y+px;；width:+all_width+px;；height:+all_height+px;；z-index:-1fillcolor=#9cfstroked=fv:fillrotate=tangle=-45focus=1

4、00%type=gradient/v:rect);； for(vari=0;；iall_height;；i+=all_height/5) document.write(v:lineid=_x0000_s1027alt=style=position:absolute;；left:0;；text-align:left;；top:0;；flip:y;；z-index:-1from=+(table_x+left_width+length)+px,+(table_y+all_height-length-i)+pxto=+(table_x+all_width+left_width)+px,+(table_

5、y+all_height-length-i)+pxstrokecolor=+line_color+/);； document.write(v:lineid=_x0000_s1027alt=style=position:absolute;；left:0;；text-align:left;；top:0;；flip:y;；z-index:-1from=+(table_x+(left_width-15)+px,+(table_y+i)+pxto=+(table_x+left_width)+px,+(table_y+i)+px/);； document.write(v:shapeid=_x0000_s1

6、025type=#_x0000_t202alt=style=position:absolute;；left:+table_x+px;；top:+(table_y+i)+px;；width:+left_width+px;；height:18px;；z-index:1);； document.write(v:textboxinset=0px,0px,0px,0pxtablecellspacing=3cellpadding=0width=100%height=100%trtdalign=right+temp4+/td/tr/table/v:textbox/v:shape);； temp4=temp4

7、-temp3/5;； document.write(v:lineid=_x0000_s1027alt=style=position:absolute;；left:0;；text-align:left;；top:0;；flip:y;；z-index:-1from=+(table_x+left_width)+px,+(table_y+all_height)+pxto=+(table_x+all_width+left_width)+px,+(table_y+all_height)+px/);； document.write(v:lineid=_x0000_s1027alt=style=positio

8、n:absolute;；left:0;；text-align:left;；top:0;；flip:y;；z-index:-1from=+(table_x+left_width)+px,+table_y+pxto=+(table_x+left_width)+px,+(table_y+all_height)+px/);； vartmpStr= for(i=1;；i=line_no;；i+) varre=/,/g;； tmpStr+=,+totali0.replace(re,)+ tmpStr=tmpStr.substr(1,tmpStr.length-1) varline_code=eval(ne

9、wArray(+tmpStr+) for(varj=1;；j=line_no;；j+) for(vari=1;；itotal_no-1;；i+) varx1=table_x+left_width+all_width*(i-1)/(total_no-1) vary1=table_y+(temp3-totalji)*(all_height/temp3) varx2=table_x+left_width+all_width*i/(total_no-1) vary2=table_y+(temp3-totalji+1)*(all_height/temp3) document.write(v:lineid

10、=_x0000_s1025alt=style=position:absolute;；left:0;；text-align:left;；top:0;；z-index:1from=+x1+px,+y1+pxto=+x2+px,+y2+pxcoordsize=21600,21600strokecolor=+line_codej-10+strokeweight=+line_codej-11+);； switch(parseInt(line_codej-12) case1: break;； case2: document.write(v:strokedashstyle=11/);； break;； ca

11、se3: document.write(v:strokedashstyle=dash/);； break;； case4: document.write(v:strokedashstyle=dashDot/);； break;； case5: document.write(v:strokedashstyle=longDash/);； break;； case6: document.write(v:strokedashstyle=longDashDot/);； break;； case7: document.write(v:strokedashstyle=longDashDotDot/);； b

12、reak;； document.write(/v:line);； switch(parseInt(line_codej-13) case1: break;； case2: document.write(v:rectid=_x0000_s1027style=position:absolute;；left:+(x1-2)+px;；top:+(y1-2)+px;；width:4px;；height:4px;；z-index:2fillcolor=+line_codej-10+strokecolor=+line_codej-10+/);； break;； case3: document.write(v

13、:ovalid=_x0000_s1026style=position:absolute;；left:+(x1-2)+px;；top:+(y1-2)+px;；width:4px;；height:4px;；z-index:1fillcolor=+line_codej-10+strokecolor=+line_codej-10+/);； break;； switch(parseInt(line_codej-13) case1: break;； case2: document.write(v:rectid=_x0000_s1027style=position:absolute;；left:+(x2-2

14、)+px;；top:+(y2-2)+px;；width:4px;；height:4px;；z-index:2fillcolor=+line_codej-10+strokecolor=+line_codej-10+/);； break;； case3: document.write(v:ovalid=_x0000_s1026style=position:absolute;；left:+(x2-2)+px;；top:+(y2-2)+px;；width:4px;；height:4px;；z-index:1fillcolor=+line_codej-10+strokecolor=+line_codej

15、-10+/);； break;； for(vari=0;；itotal_no-1;；i+) document.write(v:lineid=_x0000_s1027alt=style=position:absolute;；left:0;；text-align:left;；top:0;；flip:y;；z-index:-1from=+(table_x+left_width+all_width*(i)/(total_no-1)+px,+(table_y+all_height)+pxto=+(table_x+left_width+all_width*(i)/(total_no-1)+px,+(tab

16、le_y+all_height+15)+px/);； document.write(v:shapeid=_x0000_s1025type=#_x0000_t202alt=style=position:absolute;；left:+(table_x+left_width+all_width*(i)/(total_no-1)+px;；top:+(table_y+all_height)+px;；width:+(all_width/(total_no-1)+px;；height:18px;；z-index:1);； document.write(v:textboxinset=0px,0px,0px,

17、0pxtablecellspacing=3cellpadding=0width=100%height=100%trtdalign=left+total0i+/td/tr/table/v:textbox/v:shape);； vartb_height=30 document.write(v:rectid=_x0000_s1025style=position:absolute;；left:+(table_x+all_width+20)+px;；top:+table_y+px;；width:100px;；height:+(line_no*tb_height+20)+px;；z-index:1/);；

18、 for(vari=0;；iline_no;；i+) document.write(v:shapeid=_x0000_s1025type=#_x0000_t202alt=style=position:absolute;；left:+(table_x+all_width+25)+px;；top:+(table_y+10+(i)*tb_height)+px;；width:60px;；height:+tb_height+px;；z-index:1);； document.write(v:textboxinset=0px,0px,0px,0pxtablecellspacing=3cellpadding

19、=0width=100%height=100%trtdalign=left+line_codei4+/td/tr/table/v:textbox/v:shape);； document.write(v:rectid=_x0000_s1040alt=style=position:absolute;；left:+(table_x+all_width+80)+px;；top:+(table_y+10+(i)*tb_height+4)+px;；width:30px;；height:20px;；z-index:1fillcolor=+line_codei0+v:fillcolor2=+line_code

20、i0+rotate=tfocus=100%type=gradient/v:rect);； /script html HYPERLINK http:/ xmlns:v=urn:schemas-microsoft-com:vml HYPERLINK http:/ xmlns:o=urn:schemas-microsoft-com:office:office !-if!mso style v:*behavior:url(#default#VML) o:*behavior:url(#default#VML) .shapebehavior:url(#default#VML) /style !endif-

21、 head metahttp-equiv=Content-Typecontent=text/html;；charset=gb2312 title/title style TDFONT-SIZE:9pt /style/head bodytopmargin=5leftmargin=0scroll=AUTO scriptlanguage=javascript varnameArray=newArray();； nameArray0=中国经营报 nameArray1=招聘网 nameArray2=51Job nameArray3=新民晚报 nameArray4=新闻晚报 nameArray5=南方周末

22、 nameArray6=羊城晚报 vardataArray1=newArray() dataArray10=#FF0000,1.5,1,2,公司1/参数1线条的颜色，参数2线条的宽度，参数3线条的 HYPERLINK http:/ 类型，参数4转折点的 HYPERLINK http:/ 类型,参数5线条名称 dataArray11=200 dataArray12=1200 dataArray13=900 dataArray14=600 dataArray15=1222 dataArray16=413 dataArray17=800 vardataArray2=newArray() dataAr

23、ray20=#0000FF,1,2,3,公司2 dataArray21=400 dataArray22=500 dataArray23=1040 dataArray24=1600 dataArray25=522 dataArray26=813 dataArray27=980 vardataArray3=newArray() dataArray30=#004D00,1,1,3,公司3 dataArray31=900 dataArray32=890 dataArray33=1240 dataArray34=1300 dataArray35=722 dataArray36=833 dataArray

24、37=1280 vartotal=newArray(nameArray,dataArray1,dataArray2,dataArray3) table2(total,100,90,600,250,3);； /script /body /html = JavaScript函数之饼图 - scriptlanguage=javascript functiontable3(total,table_x,table_y,all_width,all_height,table_type) vartmdColor1=newArray();； tmdColor10=#d1ffd1;； tmdColor11=#ff

25、bbbb;； tmdColor12=#ffe3bb;； tmdColor13=#cff4f3;； tmdColor14=#d9d9e5;； tmdColor15=#ffc7ab;； tmdColor16=#ecffb7;； vartmdColor2=newArray();； tmdColor20=#00ff00;； tmdColor21=#ff0000;； tmdColor22=#ff9900;； tmdColor23=#33cccc;； tmdColor24=#666699;； tmdColor25=#993300;； tmdColor26=#99cc00;； vartb_color=new

26、Array(tmdColor1,tmdColor2);； vartb_height=30;； vartotal_no=total0.length;； vartotalpie=0;； for(vari=0;；itotal_no;；i+) totalpie+=total1i;； varPreAngle=0;； for(vari=0;；itotal_no;；i+) document.write(v:shapeid=_x0000_s1025alt=style=position:absolute;；left:+table_x+px;；top:+table_y+px;；width:+all_width+p

27、x;；height:+all_height+px;；z-index:1coordsize=1500,1400o:spt=100adj=0,0path=m750,700ae750,700,750,700,+parseInt(23592960*PreAngle)+,+parseInt(23592960*total1i/totalpie)+xefillcolor=+tb_color0i+strokecolor=#FFFFFFv:fillcolor2=+tb_color1i+rotate=tfocus=100%type=gradient/v:strokejoinstyle=round/v:formul

28、as/v:patho:connecttype=segments/v:shape);； PreAngle+=total1i/totalpie;； if(table_type=A) document.write(v:rectid=_x0000_s1025style=position:absolute;；left:+(table_x+all_width+20)+px;；top:+(table_y+20)+px;；width:100px;；height:+(total_no*tb_height+20)+px;；z-index:1/);； for(vari=0;；itotal_no;；i+) docum

29、ent.write(v:shapeid=_x0000_s1025type=#_x0000_t202alt=style=position:absolute;；left:+(table_x+all_width+25)+px;；top:+(table_y+30+(i)*tb_height)+px;；width:60px;；height:+tb_height+px;；z-index:1);； document.write(v:textboxinset=0px,0px,0px,0pxtablecellspacing=3cellpadding=0width=100%height=100%trtdalign

30、=left+total0i+/td/tr/table/v:textbox/v:shape);； document.write(v:rectid=_x0000_s1040alt=style=position:absolute;；left:+(table_x+all_width+80)+px;；top:+(table_y+30+(i)*tb_height+3)+px;；width:30px;；height:20px;；z-index:1fillcolor=+tb_color0i+v:fillcolor2=+tb_color1i+rotate=tfocus=100%type=gradient/v:r

31、ect);； /显示比例数 /document.write(v:shapeid=_x0000_s1025type=#_x0000_t202alt=style=position:absolute;；left:+(table_x+all_width+110)+px;；top:+(table_y+30+(i)*tb_height)+px;；width:60px;；height:+tb_height+px;；z-index:1);； /document.write(v:textboxinset=0px,0px,0px,0pxtablecellspacing=3cellpadding=0width=10

32、0%height=100%trtdalign=left+Math.round(parseFloat(total1i*100/totalpie)*100)/100+%/td/tr/table/v:textbox/v:shape);； if(table_type=B) varpie=3.14159265358979;； varTempPie=0;； for(vari=0;；itotal_no;；i+) varTempAngle=pie*2*(total1i/(totalpie*2)+TempPie);； varx1=table_x+all_width/2+Math.cos(TempAngle)*a

33、ll_width*3/8;； vary1=table_y+all_height/2-Math.sin(TempAngle)*all_height*3/8;； varx2=table_x+all_width/2+Math.cos(TempAngle)*all_width*3/4;； vary2=table_y+all_height/2-Math.sin(TempAngle)*all_height*3/4;； if(x2table_x+all_width/2) x3=x2+20;； x4=x3;； else x3=x2-20;； x4=x3-100;； document.write(v:ovali

34、d=_x0000_s1027style=position:absolute;；left:+(x1-2)+px;；top:+(y1-2)+px;；width:4px;；height:4px;；z-index:2fillcolor=#111111strokecolor=#111111/);； document.write(v:lineid=_x0000_s1025alt=style=position:absolute;；left:0;；text-align:left;；top:0;；z-index:1from=+x1+px,+y1+pxto=+x2+px,+y2+pxcoordsize=21600

35、,21600strokecolor=#111111strokeweight=1px/v:line);； document.write(v:lineid=_x0000_s1025alt=style=position:absolute;；left:0;；text-align:left;；top:0;；z-index:1from=+x2+px,+y2+pxto=+x3+px,+y2+pxcoordsize=21600,21600strokecolor=#111111strokeweight=1px/v:line);； document.write(v:shapeid=_x0000_s1025type

36、=#_x0000_t202alt=style=position:absolute;；left:+x4+px;；top:+(y2-10)+px;；width:100px;；height:20px;；z-index:1);； document.write(v:textboxinset=0px,0px,0px,0pxtablecellspacing=3cellpadding=0width=100%height=100%trtdalign=left+total0i+Math.round(parseFloat(total1i*100/totalpie)*100)/100+%/td/tr/table/v:

37、textbox/v:shape) TempPie+=total1i/totalpie;； /script html HYPERLINK http:/ xmlns:v=urn:schemas-microsoft-com:vml HYPERLINK http:/ xmlns:o=urn:schemas-microsoft-com:office:office !-if!mso style v:*behavior:url(#default#VML) o:*behavior:url(#default#VML) .shapebehavior:url(#default#VML) /style !endif-

38、 head metahttp-equiv=Content-Typecontent=text/html;；charset=gb2312 title/title style TDFONT-SIZE:9pt /style/head bodytopmargin=5leftmargin=0scroll=AUTO scriptlanguage=javascript /=调用方法= vardataArray=newArray() dataArray0=200 dataArray1=1200 dataArray2=900 dataArray3=600 dataArray4=1222 dataArray5=41

39、3 dataArray6=800 varnameArray=newArray() nameArray0=中国经营报 nameArray1=招聘网 nameArray2=51Job nameArray3=新民晚报 nameArray4=新闻晚报 nameArray5=南方周末 nameArray6=羊城晚报 vartotal=newArray(nameArray,dataArray) table3(total,200,40,250,250,A);； table3(total,300,450,250,250,B);； /script /body /html = JavaScript函数之柱状图 -

40、 scriptlanguage=javascript functiontable1(total,table_x,table_y,thickness,table_width,all_width,all_height,table_type) vartmdColor1=newArray();； tmdColor10=#d1ffd1;； tmdColor11=#ffbbbb;； tmdColor12=#ffe3bb;； tmdColor13=#cff4f3;； tmdColor14=#d9d9e5;； tmdColor15=#ffc7ab;； tmdColor16=#ecffb7;； vartmdCo

41、lor2=newArray();； tmdColor20=#00ff00;； tmdColor21=#ff0000;； tmdColor22=#ff9900;； tmdColor23=#33cccc;； tmdColor24=#666699;； tmdColor25=#993300;； tmdColor26=#99cc00;； vartb_color=newArray(tmdColor1,tmdColor2);； varline_color=#69f;； varleft_width=70;； varlength=thickness/2;； vartotal_no=total0.length;；

42、 vartemp1=0;； vartemp2,temp4,temp4;； for(vari=0;；itotal_no;；i+) if(temp1total0i) temp1=total0i;； temp1=parseInt(temp1.toString();； if(temp19) temp2=temp1.toString().substr(1,1) if(temp24) temp3=(parseInt(temp1/(Math.pow(10,(temp1.toString().length-1).toString()+1)*Math.pow(10,(temp1.toString().lengt

43、h-1);； else temp3=(parseInt(temp1/(Math.pow(10,(temp1.toString().length-1).toString()+0.5)*Math.pow(10,(temp1.toString().length-1);； else if(temp14) temp3=10;； else temp3=5;； temp4=temp3 document.write(!-ifgtevml1v:rectid=_x0000_s1027alt=style=position:absolute;；left:+(table_x+left_width)+px;；top:+t

44、able_y+px;；width:+all_width+px;；height:+all_height+px;；z-index:-1fillcolor=#9cfstroked=fv:fillrotate=tangle=-45focus=100%type=gradient/v:rect!endif-);； document.write(!-ifgtevml1v:lineid=_x0000_s1027alt=style=position:absolute;；left:0;；text-align:left;；top:0;；flip:y;；z-index:-1from=+(table_x+left_wi

45、dth)+px,+(table_y+all_height)+pxto=+(table_x+all_width+left_width)+px,+(table_y+all_height)+px/!endif-);； document.write(!-ifgtevml1v:lineid=_x0000_s1027alt=style=position:absolute;；left:0;；text-align:left;；top:0;；flip:y;；z-index:-1from=+(table_x+left_width)+px,+table_y+pxto=+(table_x+left_width)+px

46、,+(table_y+all_height)+px/!endif-);； switch(table_type) caseA: vartable_space=(all_width-table_width*total_no)/total_no;； document.write(!-ifgtevml1v:lineid=_x0000_s1027alt=style=position:absolute;；left:0;；text-align:left;；top:0;；flip:y;；z-index:-1from=+(table_x+left_width+length)+px,+table_y+pxto=+

47、(table_x+left_width+length)+px,+(table_y+all_height-length)+pxstrokecolor=+line_color+/!endif-);； for(vari=0;；i=all_height-1;；i+=all_height/5) document.write(!-ifgtevml1v:lineid=_x0000_s1027alt=style=position:absolute;；left:0;；text-align:left;；top:0;；flip:y;；z-index:-1from=+(table_x+left_width)+px,+

48、(table_y+all_height-length-i)+pxto=+(table_x+left_width+length)+px,+(table_y+all_height-i)+pxstrokecolor=+line_color+/!endif-);； document.write(!-ifgtevml1v:lineid=_x0000_s1027alt=style=position:absolute;；left:0;；text-align:left;；top:0;；flip:y;；z-index:-1from=+(table_x+left_width+length)+px,+(table_

49、y+all_height-length-i)+pxto=+(table_x+all_width+left_width)+px,+(table_y+all_height-length-i)+pxstrokecolor=+line_color+/!endif-);； document.write(!-ifgtevml1v:lineid=_x0000_s1027alt=style=position:absolute;；left:0;；text-align:left;；top:0;；flip:y;；z-index:-1from=+(table_x+(left_width-15)+px,+(table_

50、y+i)+pxto=+(table_x+left_width)+px,+(table_y+i)+px/!endif-);； document.write(!-ifgtevml1);； document.write(v:shapeid=_x0000_s1025type=#_x0000_t202alt=style=position:absolute;；left:+table_x+px;；top:+(table_y+i)+px;；width:+left_width+px;；height:18px;；z-index:1);； document.write(v:textboxinset=0px,0px,

51、0px,0pxtablecellspacing=3cellpadding=0width=100%height=100%trtdalign=right+temp4+/td/tr/table/v:textbox/v:shape!endif-);； temp4=temp4-temp3/5;； for(vari=0;；itotal_no;；i+) vartemp_space=table_x+left_width+table_space/2+table_space*i+table_width*i;； document.write(v:rectid=_x0000_s1025alt=style=positi

52、on:absolute;；left:);； document.write(temp_space);； document.write(px;；top:);； document.write(table_y+all_height*(1-(total0i/temp3);； document.write(px;；width:+table_width+px;；height:+all_height*(total0i/temp3)+px;；z-index:1fillcolor=+tb_color1i+);； document.write(v:fillcolor2=+tb_color0i+rotate=ttyp

53、e=gradient/) document.write(o:extrusionv:ext=viewbackdepth=+thickness+ptcolor=+tb_color1i+on=t/);； document.write(/v:rect);； document.write(v:shapeid=_x0000_s1025type=#_x0000_t202alt=style=position:absolute;；left:+temp_space+px;；top:+(table_y+all_height*(1-(total0i/temp3)-table_width)+px;；width:+(ta

54、ble_space+15)+px;；height:18px;；z-index:1);； document.write(v:textboxinset=0px,0px,0px,0pxtablecellspacing=3cellpadding=0width=100%height=100%trtdalign=center+total0i+/td/tr/table/v:textbox/v:shape);； document.write(v:shapeid=_x0000_s1025type=#_x0000_t202alt=style=position:absolute;；left:+(temp_space

55、-table_space/2)+px;；top:+(table_y+all_height+1)+px;；width:+(table_space+table_width)+px;；height:18px;；z-index:1);； document.write(v:textboxinset=0px,0px,0px,0pxtablecellspacing=3cellpadding=0width=100%height=100%trtdalign=center+total1i+/td/tr/table/v:textbox/v:shape);； break;； caseB: vartable_space

56、=(all_height-table_width*total_no)/total_no;； document.write(!-ifgtevml1v:lineid=_x0000_s1027alt=style=position:absolute;；left:0;；text-align:left;；top:0;；flip:y;；z-index:-1from=+(table_x+left_width+length)+px,+(table_y+all_height-length)+pxto=+(table_x+left_width+all_width)+px,+(table_y+all_height-l

57、ength)+pxstrokecolor=+line_color+/!endif-);； temp4=temp3/5;； for(vari=0;；i=all_width-1;；i+=all_width/5) document.write(!-ifgtevml1v:lineid=_x0000_s1027alt=style=position:absolute;；left:0;；text-align:left;；top:0;；flip:y;；z-index:-1from=+(table_x+left_width+i)+px,+(table_y+all_height-length)+pxto=+(ta

58、ble_x+left_width+length+i)+px,+(table_y+all_height)+pxstrokecolor=+line_color+/!endif-);； document.write(!-ifgtevml1v:lineid=_x0000_s1027alt=style=position:absolute;；left:0;；text-align:left;；top:0;；flip:y;；z-index:-1from=+(table_x+left_width+length+i)+px,+(table_y+all_height-length)+pxto=+(table_x+l

59、eft_width+length+i)+px,+table_y+pxstrokecolor=+line_color+/!endif-);； document.write(!-ifgtevml1v:lineid=_x0000_s1027alt=style=position:absolute;；left:0;；text-align:left;；top:0;；flip:y;；z-index:-1from=+(table_x+left_width+i+all_width/5)+px,+(table_y+all_height)+pxto=+(table_x+left_width+i+all_width/

60、5)+px,+(table_y+all_height+15)+px/!endif-);； document.write(!-ifgtevml1);； document.write(v:shapeid=_x0000_s1025type=#_x0000_t202alt=style=position:absolute;；left:+(table_x+left_width+i+all_width/5-left_width)+px;；top:+(table_y+all_height)+px;；width:+left_width+px;；height:18px;；z-index:1);； document