ITPub博客

首页 > 应用开发 > IT综合 > 利用vml制作统计图全攻略----饼图的制作 (三) (转)

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

原创 IT综合 作者:amyz 时间:2007-11-13 13:37:02 0 删除 编辑
利用vml制作统计图全攻略----饼图的制作 (三) (转)[@more@]

4.  VMLPie.prototype.CreatePieXML: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=" #EBFsourceValue="1" HasSpace="False" Negative="False" NumberType="1" TCSC="0" w:st="on">1F9";


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="" + this.all[i].Name +"("+ this.all[i].Value+")";


 


  objLegendGroup.appendChild(colorTip);


  objLegendGroup.appendChild(textTip);


 


  vGroup.appendChild(vPieEl); 


}


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/10752019/viewspace-982207/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论
  • 博文量
    3984
  • 访问量
    7338887