怎么用JAVASCRIPT在网页内画曲线图？

<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)

解决方案 »

  1.   


    // 折线图
    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>
      

  2.   

    <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>
    </head>
    <body>
    <button onclick="testNewPie()">画饼图</button>
    <div id=canvas></div>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    var div1 = document.getElementById("canvas")function testNewPie(){
    div1.innerHTML = newPie(300,300,150,0,45,"red")+newPie(300,300,150,45,110,"blue")+newPie(300,300,150,110,250,"yellow")+newPie(300,300,150,250,360,"green");
    }
    function newPie(x0,y0,radius,startAngle,endAngle,color){
    startAngle = startAngle/360*Math.PI*2;
    endAngle = endAngle/360*Math.PI*2;
    points = [];
    // get arc points
    var step = 1/radius;
    for (var i=startAngle;i<endAngle;i+=step){
    var dx = parseInt(Math.sin(i)*radius+x0);
    var dy = parseInt(Math.cos(i)*radius+y0);
    points[points.length]=[dx,dy];
    } // get radius points
    var startx=Math.sin(startAngle)*radius+x0;
    var starty=Math.cos(startAngle)*radius+y0;
    var lx = startx-x0;
    var ly = starty-y0;
    var l = Math.sqrt(lx*lx+ly*ly)
    for (var i=0;i<l;i+=1)
    {
    var p = i/l;
    var px = parseInt(x0 + lx*p);
    var py = parseInt(y0 + ly*p);
    points[points.length] = [px,py]
    } var startx=Math.sin(endAngle)*radius+x0;
    var starty=Math.cos(endAngle)*radius+y0;
    var lx = startx-x0;
    var ly = starty-y0;
    var l = Math.sqrt(lx*lx+ly*ly)
    for (var i=0;i<l;i+=1)
    {
    var p = i/l;
    var px = parseInt(x0 + lx*p);
    var py = parseInt(y0 + ly*p);
    points[points.length] = [px,py]
    }
    points = points.sort(compareByCol1); // calculate lines
    var lines = [];
    lines[0] = [points[0],points[0]]; for (var i=1;i<points.length;i++) {
    var p0 = points[i];
    var p1= lines[lines.length-1][0];//left point
    var p2= lines[lines.length-1][1];//right point if (p0[1]>p1[1]){
    lines[lines.length] = [p0,p0]; // new line
    }else if (p0[0]<p1[0]){ // new left point of the same line
    lines[lines.length-1][0] = p0;
    }else if (p0[0]>p2[0]){ // new right point of the same line
    lines[lines.length-1][1] = p0;
    } } rs = [];
    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+"'></span>";
    return rs.join("");

    }function compareByCol1(a,b){
    return a[1]-b[1];
    }//-->
    </SCRIPT>
    </body>
    </html>