利用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){           
   
     //设置为2160021600,就是保证完全覆盖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);        
   
}
   
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值