利用vml制作统计图全攻略----饼图的制作 （三）

4．             VMLPie.prototype.CreatePie

CreatePie提供了一个参数，也就是饼图制作的容器，我们通过Draw的上述代码已经建立了一个V:Group元素，这个也就是饼图绘制的容器了。

var mX=Math.pow(2,16) * 360; //这个参数是划图形的关键 //AE x y width height startangle endangle //x y表示圆心位置 //width height形状的大小 //startangle endangle的计算方法如下 // 2^16 * 度数         var vTotal=0; var startAngle=0; var endAngle=0; var pieAngle=0; var prePieAngle=0;               //计算数据的总和 for(i=0;i<this.all.length;i++){      vTotal+=this.all[i].Value; } //建立图例容器 //这里子元素的left,top或者width都是针对于容器设置的坐标系统而言的 //例如 //图表容器我设置了coordsize为 21600,21600,那么objLengendGroup的位置都是相对于这个坐标系统而言的 //和实际图形显示的大小没有直接关系 var objLegendGroup=document.createElement("v:group"); with(objLegendGroup){      style.left="17000px";      style.top="4000px";      style.width="4000px";      style.height=1400 * this.all.length +"px";      coordsize="21600,21600";                    } //做图例的背景填充并且设置阴影 var objLegendRect=document.createElement("v:rect"); objLegendRect.fillcolor=" #EBF 1F 9"; objLegendRect.strokeweight=1; with(objLegendRect){                //设置为21600，21600，就是保证完全覆盖group客户区      style.width="21600px";      style.height="21600px";                     }            //对于图例加入阴影 var vShadow=document.createElement("v:shadow"); vShadow.on="t";                vShadow.type="single"; vShadow.color="graytext"; vShadow.offset="4px,4px";               objLegendRect.appendChild(vShadow);   //将其放到图例的容器中 objLegendGroup.appendChild(objLegendRect);   this.LegendObject=objLegendGroup;

vGroup.appendChild(objLegendGroup);

 

这个时候，我们已经完成了各个区域位置的绘制，通过如上的代码，我绘制了一个LegendGroup，将其作为图例的显示位置，另外主的V:group就作为pie的绘制容器，如果出于规范的考虑，也应该将Pie的各个shape放到一个group中，那样在日后的编程控制中会更加方便一点。

下面的这段代码也就是我要讲述的，因为代码比较关键，除了给出代码，我还着重的说明各个语句的作用。

for(i=0;i<this.all.length;i++){ //顺序的划出各个饼图          var vPieEl=document.createElement("v:shape");          var vPieId=document.uniqueID;          vPieEl.style.width="15000px";          vPieEl.style.height="14000px";          vPieEl.style.top="4000px";          vPieEl.style.left="1000px";          vPieEl.adj="0,0";          vPieEl.coordsize="1500,1400";          vPieEl.strokecolor="white";                                  vPieEl.id=vPieId;          vPieEl.style.zIndex=1;          vPieEl.onmouseover="HoverPie(this)";          vPieEl.onmouseout="RestorePie(this)";                        pieAngle= this.all[i].Value / vTotal;          startAngle+=prePieAngle;          prePieAngle=pieAngle;          endAngle=pieAngle;          vPieEl.path="M 750 700 AE 750 700 750 700 " + parseInt(mX * startAngle) +" " + parseInt(mX * endAngle) +" xe";          vPieEl.title=this.all[i].Name +"/n所占比例:"+ endAngle * 100 +"%/n详细描述:" +this.all[i].TooltipText;          vPieEl._scale=parseInt( 360 * (startAngle + endAngle /2));                                             var objFill=document.createElement("v:fill");          objFill.rotate="t";                                 objFill.focus="100%";          objFill.type="gradient";                             objFill.angle=parseInt( 360 * (startAngle + endAngle /2));                     var objTextbox=document.createElement("v:textbox");          objTextbox.innerHTML=this.all[i].Name +":" + this.all[i].Value;          objTextbox.inset="5px 5px 5px 5px";          objTextbox.style.width="100px";          objTextbox.style.height="20px";                      var vColor=this.RandColor();          vPieEl.fillcolor=vColor; //设置颜色          //开始画图例                p.innerText=vPieEl.outerHTML;          var colorTip=document.createElement("v:rect");                   var iHeight=parseInt(21600 / (this.all.length * 2));          var iWidth=parseInt(iHeight * parseInt(objLegendGroup.style.height) /parseInt(objLegendGroup.style.width) /1.5 );                   colorTip.style.height= iHeight;                      colorTip.style.width=iWidth;                colorTip.style.top=iHeight * i * 2 + parseInt(iHeight /2);                              colorTip.style.left=parseInt(iWidth /2);          colorTip.fillcolor=vColor;          colorTip.element=vPieId;          //colorTip.attachEvent("onmouse",LegendMouseOverEvent);          colorTip.onmouseover="LegendMouseOverEvent()";          colorTip.onmouseout="LegendMouseOutEvent()";                   var textTip=document.createElement("v:rect");          textTip.style.top=parseInt(colorTip.style.top)- 500;          textTip.style.left= iWidth * 2;                      textTip.innerHTML="<v:textbox style=/"font-size:12px;font-weight:bold/">" + this.all[i].Name +"("+ this.all[i].Value+")</v:textbox>";                   objLegendGroup.appendChild(colorTip);          objLegendGroup.appendChild(textTip);                   vGroup.appendChild(vPieEl);        }