JavaScript绘图

JavaScript绘图

如果需要在网页上提供图形化的资料，通常是将其制作成图片，但这样一来网络上的开销就太大了。有什么办法呢？这里向你提供一组JavaScript函数，来解决这一问题。虽然简单了点，但是对画点线图来说还是绰绰有余的！

<script type="text/javascript"> if(IE4) { // 基本图形 color = "maroon" Cir(50,40,20) Arc(100,40,20,60,120) Pei(150,60,40,240,300) Rect(200,20,40,40) // 折线图 color = "#FF0000" var jd = new Array( 203,232,277,223,271,234,273,284,276,250,267,280 ) MoveTo(30,jd[0]-40) biaozhu(xo,yo,jd[0]) for(i=1;i<jd.length;i++) { LineTo(i*30+30,jd[i]-40) biaozhu(xo,yo,jd[i],1) } color = "#C0C0C0" Line(30,140,i*30+30,140) Line(30,140,30,260) // 饼图 color = "#00FF00" var gc = new Array( 150,120,200,180,180 ) var s = 0 var m = 0 var n = 0 for(i=0;i<gc.length;i++) { s +=gc[i] if(gc[i] > m) { m = gc[i] n = i } } var k = s/360 var mm = 0 var a =0 for(i=0;i<gc.length;i++) { b = Math.round((gc[i]+mm)/k) if(i==n) PopPei(600,150,100,a,b) else Pei(600,150,100,a,b) biaozhu(60,a+(b-a)/2,Math.round(gc[i]/s*100)+"%",2) mm = mm+gc[i] a = b } // 十字标注 MoveTo(280,20) zhunxing(xo,yo) }else { document.write("<p> </p><table bgcolor=#FF0000><tr><td><font color=#FFFF00>对不起！您的浏览器不能支持该页的某些功能，请换用IE4.0以上版本的浏览器！谢谢！</font></td></tr></table>") } </script> ·232 ·277 ·223 ·271 ·234 ·273 ·284 ·276 ·250 ·267 ·280 18% 14% 24% 22% 22% [280,20]