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

核心提示： 这个时候，我们已经完成了各个区域位置的绘制，利用vml制作统计图全攻略－－－－饼图的制作 （三）(2)，通过如上的代码，我绘制了一个LegendGroup，因为代码比较关键，除了给出代码，将其作为图例的显示位置，另外主的V:group就作为pie的绘制容器

这个时候，我们已经完成了各个区域位置的绘制，通过如上的代码，我绘制了一个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);　　　　
}