js中用vml画圆行图案的问题！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head >
    <title >VML Pie </title >
<STYLE >
v\:* { BEHAVIOR: url(#default#VML) }
</STYLE>
<script type="text/javascript" >  var r=200;
function showDiv(){
    var i=50;
    var m=10;
    var n=10;
    var insertTD=document.getElementById("insertTD");    for(var j=0;j <2;j++){
        //add object div
        var divv=document.createElement("div");
        divv.setAttribute("id","div"+j);
        divv.style.zIndex=j;
        divv.style.display="block";
        divv.style.left=200+i;
        divv.style.top=120+i;
        divv.setAttribute('border','solid');
        divv.setAttribute('border-width','thin thin thin thin');
        divv.setAttribute('border-color', '#000000 black black #000000');
        divv.setAttribute('position','absolute');
        insertTD.appendChild(divv);
        //add vml  <v:group >
        var group=document.createElement('v:group');
        group.setAttribute("id","group"+j);
        group.setAttribute('CoordOrig','-300,-200');
        group.setAttribute('CoordSize','600,400');
        group.setAttribute('position','relative');
        group.setAttribute('height','500');
        group.setAttribute('width','500');
        var rect=document.createElement('v:rect');
        rect.style.fillcolor='white';
        rect.style.strokecolor='red';
        rect.style.position='relative';
        rect.style.offsetLeft='-300';
        rect.style.top='-300';
        rect.style.width='600';
        rect.style.height='600';        /***    rect.setAttribute('fillcolor',);
        rect.setAttribute('strokecolor','red');
        rect.setAttribute('position','relative');
        rect.setAttribute('left','-300');
        rect.setAttribute('top','-300');
        rect.setAttribute('WIDTH','600');
        rect.setAttribute('HEIGHT','600');
        */        var shadow=document.createElement('v:shadow');
        shadow.setAttribute('type','single');
        shadow.setAttribute('color','silver');
        shadow.setAttribute('offset','4pt,3pt');divv
        divv.appendChild(group);
        group.appendChild(rect);
        rect.appendChild(shadow);
        var shapediv=document.createElement('div');
        shapediv.setAttribute("id","shapediv"+j);
        showPie('40','30',divv);        ///showPie(m,n);        i+=50;
        m+=5;
        n+=5;
    }
}
function createPie(sa,ea,color,n,divObject)
{
  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+"px;height:"+2*r+"px' CoordSize='400,400' strokeweight='1pt' fillcolor='"+color+"' strokecolor='black' path='m0,0 l "+sx+","+sy+" ar -200,-200,200,200,"+ex+","+ey+","+sx+","+sy+" l0,0 x e'/>");
  divObject.insertBefore(newPie);
  return newPie;
}function showPie(oneValue,threeValue,divObject)
{
  createPie(0,parseInt(threeValue)*3.6,"#0000FF","Three",divObject);
  createPie(parseInt(threeValue)*3.6,parseInt(threeValue)*3.6+parseInt(oneValue)*3.6,"#FF0000","One",divObject);
  createPie(parseInt(threeValue)*3.6+parseInt(oneValue)*3.6,360,"#00FF00","Two",divObject);
}function closePercentDiv(){
    showPie(40,40);
    showPie(60,20);
}
</script>
<style type="text/css" >div{
    position:absolute;
    width:462px;
    height:256px;
    background-color:#CCCCCC;
    border: solid; border-width: thin thin thin thin; border-color: #000000 black black #000000;
}v:group{
    width:300;
    height:200;
    position:relative
}v:rect{
 position:relative;
 left:-300;
 top:-300;
 WIDTH:600;
 HEIGHT:600;
 bgcolor:red;
}
</style>
</head >
    <body bgcolor="" >
    <table >
        <tr >
            <td id='insertTD'> </td >
       </tr >
     </table >
        <script type="text/javascript">
         showDiv();
        </script>
     </body >
</html >

解决方案 »

  1.   

    var shapediv=document.createElement('div');
    shapediv.setAttribute("id","shapediv"+j);
    showPie('40','30',divv);
    问题出在这里
      

  2.   

    你说的解决方案我已经试过啦，因为我需要将那个两个扇形统计图嵌入到那个柱形框里面，所以改这里showPie( '40 ', '30 ',divv); 虽然可以让扇形图案显示出来，但是他不是在那个rect框里面啦！
    高手再解决下啦，谢谢啦！
      

  3.   

    老大，我自己研究出来啦，效果如下，呵呵见笑啦，代码如下：
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
    <html xmlns:v="urn:schemas-microsoft-com:vml">
    <head >
        <title >VML Pie </title >
    <STYLE >
    v\:* { BEHAVIOR: url(#default#VML) }
    </STYLE>
    <script type="text/javascript" >var r=100;
    function showDiv(){
        var i=50;
        var m=10;
        var n=10;
        var insertTD=document.getElementById("insertTD");    for(var j=0;j <10;j++){
            //add object div
            var divv=document.createElement("div");
    divv.className='divLayer';
            divv.setAttribute("id","div"+j);
            divv.style.zIndex=j;
            divv.style.display="block";
            divv.style.left=200+r+i;
            divv.style.top=200+r+i;
    divv.style.position='absolute';
            divv.style.border='solid';
    divv.style.borderWidth='thin thin thin thin';
    divv.style.borderColor='#000000 black black #000000'; showPie('40','30',divv);
    divv.onclick=click;
    document.body.appendChild(divv);
            i+=50;
            m+=5;
            n+=5;
        }
    }function click(){
      alert(0);
    }function createPie(sa,ea,color,n,divObject)
    {
      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));
      //alert('sx:'+sx+' sy:'+sy+' ex:'+ex+' ey:'+ey);
      var newPie=document.createElement("<v:shape title='"+n+"' style='position:absolute;z-index:8;left:150;top:128;width:"+2*r+"px;height:"+2*r+"px' CoordSize='400,400' strokeweight='2pt' fillcolor='"+color+"' strokecolor='black' path='m0,1 l "+sx+","+sy+" ar -200,-200,200,200,"+ex+","+ey+","+sx+","+sy+" l0,1 x e'/>");
      divObject.insertBefore(newPie);
      return newPie;
    }function showPie(oneValue,threeValue,divObject)
    {
      createPie(0,parseInt(threeValue)*3.6,"#0000FF","Three",divObject);
      createPie(parseInt(threeValue)*3.6,parseInt(threeValue)*3.6+parseInt(oneValue)*3.6,"#FF0000","One",divObject);
      createPie(parseInt(threeValue)*3.6+parseInt(oneValue)*3.6,360,"#00FF00","Two",divObject);
    }function closePercentDiv(){
        showPie(40,40);
        showPie(60,20);
    }
    </script>
    <style type="text/css" >div{    
        width:300px;
        height:256px;
        background-color:#FFFFFF;
        border: solid; border-width: thin thin thin thin; border-color: #000000 black black #000000;
    }</style>
    </head >
        <body bgcolor="" >
    <table >
    <tr >
    <td id='insertTD'> </td >
       </tr >
    </table >
            <script type="text/javascript">
    showDiv();
            </script>
         </body >
    </html >