高分求助：jsGraphics如何画扇形图

何必用jsGraphics，它是用层模拟的，效率很低。推荐用VML或者SVG，看置定的风云舞：FlashVml(璀灿之星)4.0发布

解决方案 »

  1.   

    http://www.51windows.net/myjs/?u=/hw/asp/jsview.asp?id=268http://www.51windows.net/hw/asp/jsview.asp?id=167
      

  2.   

    这是个用VML画饼图的程序，饼图用一个个扇形组成
    <HTML xmlns:v>
    <HEAD><TITLE>?</TITLE>
    <META http-equiv=Content-Type content=text/html;charset=gb2312>
    <STYLE>
    v\:* {
    BEHAVIOR: url(#default#VML)
    }
    </STYLE>
    <SCRIPT language=javascript>
      function init(){
        var ssarr=new Array(200,100,200,80,100,50);
        var cxx=200,cyy=150,rx=200,ry=150;
        drawPie(cxx,cyy,rx,ry,ssarr);
      }
      function drawPie(cx,cy,rx,ry,sarr){
        var total=0;
        var colorsh=new Array('#ff0000','#0033FF','#aa4400','#33ffff','#FF00FF');
        for(var i=0;i<sarr.length;i++){ total+=sarr[i]; }
        for(var i=0;i<sarr.length;i++){ sarr[i]=sarr[i]/total; }
        var startang=0;
        for(var i=0;i<sarr.length;i++){ 
          var endang=Math.round(23592960*sarr[i]);
          var colorindex=i % colorsh.length;
          if((colorindex==0) && (i==(sarr.length-1))) colorindex++;
          var thiscolor=colorsh[colorindex];
      drawfan(cx,cy,rx,ry,startang,endang,thiscolor);
          startang+=endang;
        }
      }
      function drawfan(cx,cy,rx,ry,startang,endang,thiscolor){
      /* 画扇形
        (cx,cy) 中心坐标
        rx  一个半径 ry 另一个半径
        startang,endang 起始角度和结束角度
    thiscolor 填充颜色
      */
          var mapone=document.createElement("<v:shape path=\"m "+cx+" "+cy+"  al  "+cx+" "+cy+" "+rx+" "+ry+" "+startang+" "+endang+" l "+cx+" "+cy+"  e\" style=\"position:relative;rotation:0;WIDTH:400;HEIGHT:300;\"  coordsize = \"400,300\" fillcolor=\""+thiscolor+"\" strokecolor=\""+thiscolor+"\" strokeweight=\"1pt\"></v:shape>");
          group1.appendChild(mapone);
      }
    </SCRIPT>
    </HEAD>
    <BODY onload=init();>
      <v:group 
                 id=group1 
                 style="left:0;top:0;WIDTH: 400px; POSITION: absolute; HEIGHT: 300px; rotation: 0" coordsize="400,300">
     <v:line from="0,0"  to="400,0"/>
     <v:line from="400,0"  to="400,300"/>
     <v:line from="400,300"  to="0,300"/>
     <v:line from="0,300"  to="0,0"/>
      </v:group>
    </BODY>
    </HTML>