点击这里给我发消息 点击这里给我发消息

利用vml制作统计图全攻略----饼图的制作 (三)

添加时间:2010-1-5
    相关阅读: HTML 制作 系统

 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" />
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);    
}

本文作者:未知
咨询热线:020-85648757 85648755 85648616 0755-27912581 客服:020-85648756 0755-27912581 业务传真:020-32579052
广州市网景网络科技有限公司 Copyright◎2003-2008 Veelink.com. All Rights Reserved.
广州商务地址:广东省广州市黄埔大道中203号(海景园区)海景花园C栋501室
= 深圳商务地址:深圳市宝源路华丰宝源大厦606
研发中心:广东广州市天河软件园海景园区 粤ICP备05103322号 工商注册