emu大哥请进.

你不懂编程，那我就帮不了你什么了，我只能告诉你怎么画，具体画还是要你自己动手。
下面是我改过的一个画图的例子，但是要让复杂图形随时变化恐怕客户端计算量会大了点。
ie5.0,ns6.0,moz1.3下面通过，不过饼图有点慢，尤其在ns和moz下面
<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="testDrawCurve()">&raquo;&shy;&Ccedil;ú&Iuml;&szlig;</button>
<button onclick="testDrawArc()">&raquo;&shy;&raquo;&iexcl;&Iuml;&szlig;</button>
<button onclick="testDrawCircle()">&raquo;&shy;&Ocirc;&sup2;</button>
<button onclick="testDrawLine()">&raquo;&shy;&Iuml;&szlig;</button>
<button onclick="testDrawRectangle()">&raquo;&shy;&frac34;&Oslash;&ETH;&Icirc;</button>
<button onclick="testDrawPie()">&raquo;&shy;±&yacute;&Iacute;&frac14;</button>
<div id=canvas></div>
<SCRIPT LANGUAGE="JavaScript">
<!--
var div1 = document.getElementById("canvas")
function testDrawCurve()
{
div1.innerHTML = drawCurve();
}
function testDrawArc()
{
div1.innerHTML =drawArc(150,150,100,0,270,"blue")
}
function testDrawCircle()
{
div1.innerHTML = drawCircle(200,200,150,"blue");
}
function drawCircle(x0,y0,radius,color)
{
return drawArc(x0,y0,radius,0,360,color)
}
function testDrawLine()
{
div1.innerHTML = drawLine(100,200,500,200,"yellow")+drawLine(300,100,300,400,"black")+drawLine(600,400,100,100,"violet")
}
function testDrawRectangle()
{
div1.innerHTML = drawRectangle(200,100,600,200,"blue")+drawRectangle(100,200,400,500,"red")
}
function testDrawPie()
{
div1.innerHTML = drawPie(300,200,80,0,45,"red")+drawPie(300,200,80,45,110,"blue")+drawPie(300,200,80,110,250,"yellow")+drawPie(300,200,80,250,360,"green");
}function drawLine(x0,y0,x1,y1,color)
{
var rs = "";
if (y0 == y1)  //&raquo;&shy;&ordm;á&Iuml;&szlig;
{
if (x0>x1){var t=x0;x0=x1;x1=t}  
rs = "<span style='top:"+y0+";left:"+x0+";position:absolute;font-size:1px;background-color:"+color+";height:1; width:"+Math.abs(x1-x0)+"'></span>";
}
else if (x0 == x1)  //&raquo;&shy;&Ecirc;ú&Iuml;&szlig;
{
if (y0>y1){var t=y0;y0=y1;y1=t} 
rs = "<span style='top:"+y0+";left:"+x0+";position:absolute;font-size:1px;background-color:"+color+";width:1;height:"+Math.abs(y1-y0)+"'></span>";
}
else
{
var lx = x1-x0
var ly = y1-y0
var l = Math.sqrt(lx*lx+ly*ly)
rs = new Array();
for (var i=0;i<l;i+=1)
{
var p = i/l;
var px = parseInt(x0 + lx*p);
var py = parseInt(y0 + ly*p);
rs[rs.length] = "<span style='top:"+py+";left:"+px+";height:1;width:1;position:absolute;font-size:1px;background-color:"+color+"'></span>";
}
rs = rs.join("");
}
return rs
}
function drawRectangle(x0,y0,x1,y1,color)
{
if (x0 == x1 || y0 == y1) return;
if (x0>x1) {var t=x0;x0=x1;x1=t}
if (y0>y1) {var t=y0;y0=y1;y1=t}
return "<table style='top:"+y0+";left:"+x0+";position:absolute'><td bgcolor="+color+" width="+(x1-x0)+" height="+(y1-y0)+">&nbsp;</td></table>";
}
function drawPie(x0,y0,radius,startAngle,endAngle,color)
{
var rs = drawArc(x0,y0,radius,startAngle,endAngle,color)
for (var i=5;i<radius;i+=5)
rs += drawArc(x0,y0,i,startAngle,endAngle,color,5)
startAngle = startAngle/360*Math.PI*2;
endAngle = endAngle/360*Math.PI*2;
var startx=Math.sin(startAngle)*radius+x0;
var endx=Math.sin(endAngle)*radius+x0;
var starty=Math.cos(startAngle)*radius+y0;
var endy=Math.cos(endAngle)*radius+y0;
rs += drawLine(x0,y0,startx,starty,color)
rs += drawLine(x0,y0,endx,endy,color)
return rs;
}
function drawArc(x0,y0,radius,startAngle,endAngle,color,step)
{
if (step == null || isNaN(step)) step=1;
rs = new Array();
tmpar = new Array();
startAngle = startAngle/360*Math.PI*2;
endAngle = endAngle/360*Math.PI*2;
for (var i=startAngle;i<endAngle;i+=(step/radius))
{
var dx = parseInt(Math.sin(i)*radius+x0);
var dy = parseInt(Math.cos(i)*radius+y0);
rs[rs.length] = "<span style='top:"+dy+";left:"+dx+";position:absolute;height:1;width:1;position:absolute;font-size:1px;background-color:"+color+"'></span>";
}
return (rs.join(""));
}
function drawCurve()
{
var rs = new Array();
for (var i=0;i<2*Math.PI;i+=.01)
{
var x = parseInt(300-Math.sin(i)*100)
var y = parseInt(300-Math.cos(i)*100)
rs[rs.length] = "<span style='top:"+x+";left:"+(i*100+90)+" ;height:1;width:1;position:absolute;font-size:1px;background-color:blue'></span>";
rs[rs.length] = "<span style='top:"+y+";left:"+(i*100+90)+" ;height:1;width:1;position:absolute;font-size:1px;background-color:blue'></span>";
}
return rs.join("");
}
//-->
</SCRIPT>
</body>
</html>

解决方案 »

  1.   

    唉中文又贴成乱码了，重贴。<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="testDrawCurve()">画曲线</button>
    <button onclick="testDrawArc()">画弧线</button>
    <button onclick="testDrawCircle()">画圆</button>
    <button onclick="testDrawLine()">画线</button>
    <button onclick="testDrawRectangle()">画矩形</button>
    <button onclick="testDrawPie()">画饼图</button>
    <div id=canvas></div>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    var div1 = document.getElementById("canvas")
    function testDrawCurve()
    {
    div1.innerHTML = drawCurve();
    }
    function testDrawArc()
    {
    div1.innerHTML =drawArc(150,150,100,0,270,"blue")
    }
    function testDrawCircle()
    {
    div1.innerHTML = drawCircle(200,200,150,"blue");
    }
    function drawCircle(x0,y0,radius,color)
    {
    return drawArc(x0,y0,radius,0,360,color)
    }
    function testDrawLine()
    {
    div1.innerHTML = drawLine(100,200,500,200,"yellow")+drawLine(300,100,300,400,"black")+drawLine(600,400,100,100,"violet")
    }
    function testDrawRectangle()
    {
    div1.innerHTML = drawRectangle(200,100,600,200,"blue")+drawRectangle(100,200,400,500,"red")
    }
    function testDrawPie()
    {
    div1.innerHTML = drawPie(300,200,80,0,45,"red")+drawPie(300,200,80,45,110,"blue")+drawPie(300,200,80,110,250,"yellow")+drawPie(300,200,80,250,360,"green");
    }function drawLine(x0,y0,x1,y1,color)
    {
    var rs = "";
    if (y0 == y1)  //画横线
    {
    if (x0>x1){var t=x0;x0=x1;x1=t}  
    rs = "<span style='top:"+y0+";left:"+x0+";position:absolute;font-size:1px;background-color:"+color+";height:1; width:"+Math.abs(x1-x0)+"'></span>";
    }
    else if (x0 == x1)  //画竖线
    {
    if (y0>y1){var t=y0;y0=y1;y1=t} 
    rs = "<span style='top:"+y0+";left:"+x0+";position:absolute;font-size:1px;background-color:"+color+";width:1;height:"+Math.abs(y1-y0)+"'></span>";
    }
    else
    {
    var lx = x1-x0
    var ly = y1-y0
    var l = Math.sqrt(lx*lx+ly*ly)
    rs = new Array();
    for (var i=0;i<l;i+=1)
    {
    var p = i/l;
    var px = parseInt(x0 + lx*p);
    var py = parseInt(y0 + ly*p);
    rs[rs.length] = "<span style='top:"+py+";left:"+px+";height:1;width:1;position:absolute;font-size:1px;background-color:"+color+"'></span>";
    }
    rs = rs.join("");
    }
    return rs
    }
    function drawRectangle(x0,y0,x1,y1,color)
    {
    if (x0 == x1 || y0 == y1) return;
    if (x0>x1) {var t=x0;x0=x1;x1=t}
    if (y0>y1) {var t=y0;y0=y1;y1=t}
    return "<table style='top:"+y0+";left:"+x0+";position:absolute'><td bgcolor="+color+" width="+(x1-x0)+" height="+(y1-y0)+">&nbsp;</td></table>";
    }
    function drawPie(x0,y0,radius,startAngle,endAngle,color)
    {
    var rs = drawArc(x0,y0,radius,startAngle,endAngle,color)
    for (var i=5;i<radius;i+=5)
    rs += drawArc(x0,y0,i,startAngle,endAngle,color,5)
    startAngle = startAngle/360*Math.PI*2;
    endAngle = endAngle/360*Math.PI*2;
    var startx=Math.sin(startAngle)*radius+x0;
    var endx=Math.sin(endAngle)*radius+x0;
    var starty=Math.cos(startAngle)*radius+y0;
    var endy=Math.cos(endAngle)*radius+y0;
    rs += drawLine(x0,y0,startx,starty,color)
    rs += drawLine(x0,y0,endx,endy,color)
    return rs;
    }
    function drawArc(x0,y0,radius,startAngle,endAngle,color,step)
    {
    if (step == null || isNaN(step)) step=1;
    rs = new Array();
    tmpar = new Array();
    startAngle = startAngle/360*Math.PI*2;
    endAngle = endAngle/360*Math.PI*2;
    for (var i=startAngle;i<endAngle;i+=(step/radius))
    {
    var dx = parseInt(Math.sin(i)*radius+x0);
    var dy = parseInt(Math.cos(i)*radius+y0);
    rs[rs.length] = "<span style='top:"+dy+";left:"+dx+";position:absolute;height:1;width:1;position:absolute;font-size:1px;background-color:"+color+"'></span>";
    }
    return (rs.join(""));
    }
    function drawCurve()
    {
    var rs = new Array();
    for (var i=0;i<2*Math.PI;i+=.01)
    {
    var x = parseInt(300-Math.sin(i)*100)
    var y = parseInt(300-Math.cos(i)*100)
    rs[rs.length] = "<span style='top:"+x+";left:"+(i*100+90)+" ;height:1;width:1;position:absolute;font-size:1px;background-color:blue'></span>";
    rs[rs.length] = "<span style='top:"+y+";left:"+(i*100+90)+" ;height:1;width:1;position:absolute;font-size:1px;background-color:blue'></span>";
    }
    return rs.join("");
    }
    //-->
    </SCRIPT>
    </body>
    </html>
      

  2.   

    mozilla下的饼图，终于被我画出来了：http://expert.csdn.net/Expert/TopicView1.asp?id=1625676