try this

呵呵，这算什么，我这也有一个给你看看
<html>
<head>
<title>JavaScript绘图</title>
<script language="JavaScript">
IE4 = ! (navigator.appVersion.charAt(0) < "4" || navigator.appName == "Netscape")var xo=0
var yo=0
var Ox = -1
var Oy = -1var rad = Math.PI/180
var maxY = 400
var color = "red"function print(str) {
document.write(str)
}function orgY(y) {
return maxY-y
}
function outPlot(x,y,w,h) {
print('<span style="position:absolute;left:'+x+';top:'+y+';height:'+h+';width:'+w+';font-size:1px;background-color:'+color+'"></span>')
}function Plot(x,y) {
outPlot(x,y,1,1)
if(Ox>=0 || Oy>=0) {
ShowLine(Ox,Oy,x-Ox,y-Oy)
}
Ox = x
Oy = y
}function ShowLine(x,y,w,h) {
if(w<0) {
x += w
w = Math.abs(w)
}
if(h<0) {
y += h
h = Math.abs(h)
}
if(w<1) w=1
if(h<1) h=1
outPlot(x,y,Math.round(w),Math.round(h))
}function LineTo(x,y) {
Line(xo,yo,x,y)
}function sign(n) {
if(n>0)
return 1
if(n<0)
return -1
return n
}function Line(x1,y1,x2,y2) {
x2 = Math.round(x2)
y2 = Math.round(y2)
xo = x2
yo = y2
y1 = orgY(y1)
y2 = orgY(y2)
var str = ""
var i=0var x = x1
var y = y1
dx = Math.abs(x2-x1)
dy = Math.abs(y2-y1)
s1 = sign(x2-x1)
s2 = sign(y2-y1)if(dx==0 || dy==0) {
ShowLine(x1,y1,x2-x1,y2-y1)
return
}if(dx>dy) {
temp = dx
dx = dy
dy = temp
key = 1
}else
key = 0
e = 2*dy-dxfor(i=0;i<dx;i++) {
px = 0
py = 0
Plot(x,y)
while(e>=0) {
if(key==1) {
x += s1
px += s1
}else {
y += s2
py += s2
}
e = e-2*dx
}
if(key==1)
y += s2
else
x += s1
e = e+2*dy
}
} function MoveTo(x,y) {
Ox = Oy = -1
xo = Math.round(x)
yo = Math.round(y)
}// 圆
function Cir(x,y,r) {
MoveTo(x+r,y)
for(i=0;i<=360;i+=5) {
LineTo(r*Math.cos(i*rad)+x,r*Math.sin(i*rad)+y)
}
}
// 弧形
function Arc(x,y,r,a1,a2) {
MoveTo(r*Math.cos(a1*rad)+x,r*Math.sin(a1*rad)+y)
for(i=a1;i<=a2;i++) {
LineTo(r*Math.cos(i*rad)+x,r*Math.sin(i*rad)+y)
}
}
// 扇形
function Pei(x,y,r,a1,a2) {
MoveTo(x,y)
for(var i=a1;i<=a2;i++) {
LineTo(r*Math.cos(i*rad)+x,r*Math.sin(i*rad)+y)
}
LineTo(x,y)
}
// 弹出扇形
function PopPei(x,y,r,a1,a2) {
dx = r*Math.cos((a1+(a2-a1)/2)*rad)/10
dy = r*Math.sin((a1+(a2-a1)/2)*rad)/10
x += dx
y += dy
MoveTo(x,y)
for(var i=a1;i<=a2;i++) {
LineTo(r*Math.cos(i*rad)+x,r*Math.sin(i*rad)+y)
}
LineTo(x,y)
}// 矩形
function Rect(x,y,w,h) {
MoveTo(x,y)
LineTo(x+w,y)
LineTo(x+w,y+h)
LineTo(x,y+h)
LineTo(x,y)
}// 准星
function zhunxing(x,y) {
var ox = xo
var oy = yo
var oColor = color
color = "#000000"
Line(x-5,y,x+6,y)
Line(x,y-6,x,y+5)
print('<span style="position:absolute;font-size:10pt;left:'+(x+5)+';top:'+orgY(y+5)+';">['+x+','+y+']</span>')
color = oColor
xo = ox
yo = oy
}
// 标注
function biaozhuStr(x,y,s) {
return '<span style="position:absolute;font-size:10pt;left:'+x+';top:'+orgY(y)+';">'+s+'</span>'
}
function biaozhu(x,y,s,t) {
var ox = xo
var oy = yo
var oColor = color
point = "p01.gif"
if(t==1) {
print(biaozhuStr(x-5,y+6,"·"+s))
}
if(t==2) {
print(biaozhuStr(xo+x*Math.cos(y*rad)-10,yo+x*Math.sin(y*rad),s))
}
color = oColor
xo = ox
yo = oy
}
</script>
</head><body>
<table border="0" width="100%">
<tr>
<td width="100%" style="font-family: 方正舒体; font-size: 18pt; color: #FF0000" class="t1">JavaScript绘图</td>
</tr>
<tr>
<td width="100%" style="font-family: 幼圆; font-size: 12pt; color: #008000" class="t2">
如果需要在网页上提供图形化的资料，通常是将其制作成图片，但这样一来网络上的开销就太大了。有什么办法呢？这里向你提供一组JavaScript函数，来解决这一问题。虽然简单了点，但是对画点线图来说还是绰绰有余的！</td>
</tr>
</table><script>
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)
Line(0,0,20,20)
// 折线图
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></body>
</html>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

http://fason.nease.net/code/js/other/draw.htm我这也有
zhangguagua(瓜瓜) :
你这段在这里被贴出来上百次了呵呵，我写过它的好几个改进版，也贴过十来次了。用它的方法能画出来实心的饼图吗？
实心饼图：
<HTML>
<HEAD>
<TITLE>饼图</TITLE>
<script>
function DrawPieChart()
{
        var totalvalue = value1.value/360 + value2.value/360 + value3.value/360 + value4.value/360;
        var per1 = value1.value/totalvalue;
        var per2 = value2.value/totalvalue;
        var per3 = value3.value/totalvalue;
        var per4 = value4.value/totalvalue;        var per12 = per1 + per2;
        var per123 = per1 + per2 + per3;Chart.innerHTML = "<OBJECT ID='PieChart' CLASSID='CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6' STYLE='position:relative;top:0;left:0;width:400;height:400'><PARAM NAME='Line0001' ALUE='SetLineColor(255, 0, 127)'><PARAM NAME='Line0002' VALUE='SetFillStyle(1)'><PARAM NAME='Line0003' VALUE='SetFillColor(0, 255, 80)'><PARAM NAME='Line0004' VALUE='Pie(-100, -100, 200, 200, 0, "+ per1 +", 0)'><PARAM NAME='Line0005' VALUE='SetFillStyle(1)'><PARAM NAME='Line0006' VALUE='SetFillColor(0, 0, 255)'><PARAM NAME='Line0007' VALUE='Pie(-100, -100, 200, 200, "+ per1 + ", " + per2 + ", 0)'><PARAM NAME='Line0008' VALUE='SetFillStyle(1)'><PARAM NAME='Line0009' VALUE='SetFillColor(0, 128, 128)'><PARAM NAME='Line0010' VALUE='Pie(-100, -100, 200, 200, "+per12+","+per3+", 0)'><PARAM NAME='Line0011' VALUE='SetFillStyle(1)'><PARAM NAME='Line0012' VALUE='SetFillColor(255, 0, 0)'><PARAM NAME='Line0013' VALUE='Pie(-100, -100, 200, 200, "+per123+","+per4+", 0)'></OBJECT>"}
</script>
</HEAD>
<BODY>
<table border=1 width=100%>
<tr><td id="Chart" width=50% height=400 align=center>
准备画图</td>
<td width=50%>
<p align=center>
输入4个数<br>
<input id="value1" type=text size=6 value=0>
<input id="value2" type=text size=6 value=0>
<input id="value3" type=text size=6 value=0>
<input id="value4" type=text size=6 value=0>
</p>
<p align=center>
<input type=button onclick="DrawPieChart()" value="画饼图">
</p>
</td>
</tr>
</table>
</BODY>
</HTML>
xinyunyishui(心云意水) :
这是activex的实现，也被贴出来多少次啦。但是怎么cross browser呢？
楼上的楼上用的是object，不是纯script，呵呵
纯script?
这个……
难道算出来以后一个像素一个像素的填充？？？
看了一下代码，原来emu是用横向扫描的方法，不错啊。我再提个思路：下回试试看画出边框以后用填充的方法来画图，这样可能会更通用一些，嘿嘿。不过这样的话好像就不能用span了……
不错。看来emu_ston 的计算机图形学学的不错。我都忘了。
画出边框代价就太大了，要多用一倍的span对象。这段代码在moz和ns下面的速度也就是可以接受而已，再慢就不好了。计算机图形学的课我好像没有去上过，不过印象中也没有重修，多半是B类课了。课本我都多半没模过几回呵呵。填充算法是自己瞎想的。
曾记得用c 画园、椭圆、什么贝兹曲线啦   等，也是一个点一个点画的。 drawPix(x,y),可以找本计算机图形学看看，也许会得到启发。你的那些算法何上面的差不多。不过，看看肯定会有帮助。说不定还能从IE 屏幕上画出动态的曲线来。清华大学出版的一本计算机图形学不错。可以看看。你的提高是我的快乐！！呵呵  ：）
emu还在?好强哦,画得很好,收藏先.
最近看到你以前那贴说写JS都要遇到的事情,惭愧,很多都还没有去做.最近自己写一带checkbox的树,没办法,xml不熟,用纯js来写了,过几天给你看一下.哎,什么时候才可以有你们十分一,emu,net_lover,qiushuiwuhen.....无望..
这里面的各路高手，我那个关于this 的疑惑，请你们去帮忙关注解决一下。
参与讨论者，加分！
http://expert.csdn.net/Expert/topic/1629/1629593.xml?temp=.7047846
emu是还在，只是背叛红军戴上绿帽子了呵呵。对象和this的话题从前讨论的太多了，用“对象”这个词在js小版中就可以搜到274篇文章。zhjzh_zjz (虚心学习，望多指教)是zhongjz(斑马)的马甲？
报告一个bug：
div1.innerHTML = newPie(300,300,150,-45,45,"red")+newPie(300,300,150,45,315,"green");如果有一个扇形超过半圆并且在最后画的话有可能覆盖其他的扇形。解决方法：1 先画大扇形：
div1.innerHTML = newPie(300,300,150,45,315,"green")+newPie(300,300,150,-45,45,"red");2 画的时候分层： var z = (endAngle-startAngle>Math.PI)?-1:1;
for (var i=lines.length-1;i>-1;i--)
rs[i] =  "<span style='top:"+lines[i][0][1]+";left:"+lines[i][0][0]+";height:1;width:"+(lines[i][1][0]-lines[i][0][0]+1)+";position:absolute;font-size:1px;background-color:"+color+";z-index="+z+"'></span>";
非也。这两天的思考颇有心得，过量填写点东西出来大家看看。emu_ston(吃的就是没文化的亏)  还有那个瓦萨达姆金库的还有那个 emu(**)也是你哟？？早就注意到你了！！都是同一个你，
高手好多阿。
俺也喜欢javascript了。
就是水平太差，看复杂一点点的就不大懂了。
这帖子好，俺先用装弼马翁的瓶子收了再说。
以后慢慢看。
今天把它优化了一下：<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<META NAME="Author" CONTENT="emu(ston)">
<META NAME="Keywords" CONTENT="javascript,chart">
<title>emu's paint without vlm</title>
<style>
.emuW{position:absolute;font-size:1px;width:1}
.emuH{position:absolute;font-size:1px;height:1}
</style>
</head>
<body>
<button onclick="testNewPie()">»±ýÍ¼</button>
<div id=canvas></div>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</body>
</html>这下了一倍多，好像已经无法再快了呵呵。
faint我用EDITPLUS的Ctrl+B，我的EP立刻死翘翘了：（
用IE6看<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML XMLNS:t ="urn:schemas-microsoft-com:time";
      XMLNS:v="urn:schemas-microsoft-com:vml"; xmlns:MSHelp=http://msdn.microsoft.com/msHelp>

<HEAD>
<TITLE>Use keyTimes with a Values List</TITLE>  <?IMPORT namespace="t" implementation="#default#time2">
  <?IMPORT namespace="v" implementation="#default#VML">
</HEAD>
<BODY>
<input><br>
<input><br>
<input><br>
<input><br>
<input><br>
<input><br>
<input><br>
<input><br>
<input><br>
<input><br>
<input><br>
<input><br>
<t:ANIMATE id="oAnim" begin="1" dur="5" fill="hold" targetElement="oOval"
attributeName="width" calcMode="linear" values="100; 300; 500"
keyTimes="0;.7; 1" /><v:oval id="oOval"  fillcolor="red" style="position:absolute;
top:200;left:50;width:100;height:100;align:center" /></DIV>
</BODY>
</HTML>
呵呵，vml的版本一年前就贴过了：
http://expert.csdn.net/Expert/topic/840/840502.xml