想在网页中生成一个扇状统计图？怎么实现？

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<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=div1></div>
<SCRIPT LANGUAGE="JavaScript">
<!--
function testDrawCurve()
{
div1.innerHTML = drawCurve();
}
function testDrawArc()
{
div1.innerHTML =drawArc(150,150,100,0,270,"viloet")
}
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,120,0,45,"red");
}function drawLine(x0,y0,x1,y1,color)
{
var rs = "";
if (y0 == y1)  //画横线
{
rs = "<table style='top:"+y0+";left:"+x0+";position:absolute'><td bgcolor="+color+" height=3 width="+Math.abs(x1-x0)+"></td></table>";
}
else if (x0 == x1)  //画竖线
{
rs = "<table style='top:"+y0+";left:"+x0+";position:absolute'><td bgcolor="+color+" width=1 height="+Math.abs(y1-y0)+"></td></table>";
}
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 = x0 + lx*p;
var py = y0 + ly*p;
rs[rs.length] = "<table style='top:"+py+";left:"+px+";position:absolute'><td bgcolor="+color+" height=3></td></table>";
}
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)+"></td></table>";
}
function drawPie(x0,y0,radius,startAngle,endAngle,color)
{
var rs = drawArc(x0,y0,radius,startAngle,endAngle,color)
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)
{
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+=(1/radius))
{
var dx = Math.sin(I)*radius+x0;
var dy = Math.cos(I)*radius+y0;
rs[rs.length] = "<table style='top:"+dy+";left:"+dx+";position:absolute'><td bgcolor="+color+" height=3></td></table>";
}
return (rs.join(""));
}
function drawCurve()
{
var rs = new Array();
for (var I=0;I<2*Math.PI;I+=.02)
{
var x = 300-Math.sin(I)*100
var y = 300-Math.cos(I)*100
rs[rs.length] = "<table style='top:"+x+";left:"+(I*100+90)+";position:absolute'><td bgcolor=blue height=3></td></table>";
rs[rs.length] = "<table style='top:"+y+";left:"+(I*100+90)+";position:absolute'><td bgcolor=violet height=3></td></table>";
}
return rs.join("");
}
//-->
</SCRIPT>
</body>
</html>

解决方案 »

  1.   

    <html xmlns:v="urn:schemas-microsoft-com:vml">
    <head>
    <title>VML</title>
    </head>
    <STYLE>
     v\:* { BEHAVIOR: url(#default#VML) }
    </STYLE>
    </HEAD>
    <BODY onload=changeit()>
    <br>
    <font color=red>苹果</font>：
    <select id="apple" onchange="changeit()">
    <option value="10">10%
    <option value="20">20%
    <option value="30">30%
    <option value="40">40%
    <option value="50">50%
    </select>
    &nbsp;&nbsp;<font color="green">梨</font>：
    <select id="pear" onchange="changeit()">
    <option value="5">5%
    <option value="10">10%
    <option value="20">20%
    <option value="30">30%
    <option value="40">40%
    </select>
    &nbsp;&nbsp;<font color="blue">香蕉</font>：<input id="banana" type="text" readonly size="2" value="85">%<br><br>
    <center>
    <v:group ID="group1" CoordOrig="-3000,-2000" CoordSize="6000,4000" style="width:300;height:200;position:relative">
    <v:rect style="position:relative;left:-3000;top:-3000;WIDTH:6000;HEIGHT:6000;" fillcolor="white" strokecolor="black">
    <v:shadow on="t" type="single" color="silver" offset="4pt,3pt"></v:shadow>
    </v:rect>
    <div id="pie"></div>
    </v:group>
    </BODY>
    </HTML>
    <script language="JavaScript">
    function changeit()
    {
     banana.value=100-(parseInt(apple.value)+parseInt(pear.value));
     showPie();
    }
    var r=2000;
    function createPie(sa,ea,color,n)
    {
      var fs=Math.PI*2*(sa/360);
      var fe=Math.PI*2*(ea/360);
      var sx=parseInt(r*Math.sin(fs));
      var sy=parseInt(-r*Math.cos(fs));
      var ex=parseInt(r*Math.sin(fe));
      var ey=parseInt(-r*Math.cos(fe));
      var newPie=document.createElement("<v:shape title='"+n+"' style='position:absolute;z-index:8;width:"+2*r+";height:"+2*r+"' CoordSize='4000,4000' strokeweight='1pt' fillcolor='"+color+"' strokecolor='black' path='m0,0 l "+sx+","+sy+" ar -2000,-2000,2000,2000,"+ex+","+ey+","+sx+","+sy+" l0,0 x e' />");
      //var newPie=document.createElement("<v:shape style='position:absolute;z-index:8;left:"+px+";top:"+py+";width:"+2*r+";height:"+2*r+"' CoordSize='4000,4000' strokeweight='1pt' fillcolor='"+color+"' strokecolor='"+color+"' path='m0,0 l "+sx+","+sy+" ar -2000,-2000,2000,2000,"+ex+","+ey+","+sx+","+sy+" l0,0 x e' />");
      pie.insertBefore(newPie);
    }
    function showPie()
    {
      pie.innerHTML=""; 
      createPie(0,parseInt(banana.value)*3.6,"blue","香蕉");
      createPie(parseInt(banana.value)*3.6,parseInt(banana.value)*3.6+parseInt(apple.value)*3.6,"red","苹果");
      createPie(parseInt(banana.value)*3.6+parseInt(apple.value)*3.6,360,"green","梨");
    }
    </script>