4． VMLPie.prototype.CreatePIE<?XML:namespace prefix = o ns = "urn:schemas-microsoft-com:office:Office" />

　　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<?XML:namespace prefix = st1 ns = "urn:schemas-microsoft-com:Office:smarttags" />


• 網俠首頁
• 網絡學院
• 軟件下載

網絡技術 圖形圖像 操作系統 上網指南 工具軟件 辦公軟件 媒體動畫 網站運營 認證考試 網頁制作 技術開發 web編程 電腦入門 游戲 QQ 當前位置：網俠下載學院 → 網頁制作 → XML → 利用vml制作統計圖全攻略----餅圖的制作

利用vml制作統計圖全攻略----餅圖的制作

日期：2008年12月13日 作者： 相關tags: 利用 vml 制作 統計 餅圖

• 
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);　　　　
}