当前页面: 开发资料首页 → Javascript 专题 → 利用vml制作统计图全攻略----饼图的制作（三）

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

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

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" />1F9";

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

</td> </tr> <tr> <td vAlign=top align=left height="100%">
↑返回目录
前一篇: 利用vml制作统计图全攻略----饼图的制作（二）
后一篇: 利用vml制作统计图全攻略----饼图的制作（四）

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