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
){
//
设置为
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="" + 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/,如需转载,请注明出处,否则将追究法律责任。
转载于:http://blog.itpub.net/10752019/viewspace-982207/