我们现在就开始来看如上代码的实现。<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />
1. 首先建立一个v:shape,left,top,width,height分别设置为1000px,4000px,15000px;14000px;这个的数字是我根据大致的位置确定的。
2. 设置每个shape的id，我采用了document.uniqueID，就是用DOM的方法提供的随机id,本来我没有打算设置这个ID，但是后来考虑到和legend的交互，所以就设置了每个shape的ID.
3. 设置shape的onmouseover，onmouseout事件，开始的时候我是采用attachEvent的方式来实现的，后来发现无法起作用（到现在我也没有找到原因），求出每个数据所占的比例。
4. 设置Path,这个也就是比较令人难以看懂的部分了，我首先求出了startAngle和endAngle，startAngle的意义是这样的，假设有3个数，0.2,0.2,0.4,对于第二项来说，startAngle应该是 0.25,endAngle是0.25,对于第三项来说，startAngle是0.5,endAngle是0.5，总而言之，startAngle可以表示为前面数据所占的比例，engAngle表示当前数据所占的比例。Path有很多指令，对于其他指令，我就不多作解释，而这里使用的是M 750 700 AE 750 700 750 700 start end 。对于shape我重新定义了coordsize=”1500,<?xml:namespace prefix = st1 ns = "urn:schemas-microsoft-com:office:smarttags" />1400”,m 750,700则表示移动到 750，700，就是移动到shape定义的中心，AE用来画曲线，总共有6个参数，w3c的note描述如下center (x,y) size(w,h) start-angle, end-angle，前面四个参数不难理解，剩下的两个参数我不是特别明白意思，但是在国外的一篇文章看到其中的算法如下应该是 2^16 * 度数，对应于程序，就应该是startAngle * 2^16 * 360，因为我的startAngle是比例。
5. 通过设置fillcolor来设置饼图块的颜色，同时设置title提供一些提示信息.
6. 对于图例开始着色，同时添加图例的文字说明.
7. 因为所有的坐标系统都是相对的，为了保证美观，对于objLegendGroup我通过1400 * this.all.length +"px"来求得，而对于图例的colortip，高度和宽度就是动态计算的。
到目前为止，通过程序已经建立了一个基于VML的Pie，剩下的就是输出的问题了，前文我也提到过，我通过DOM方式建立的VML在显示方面没有任何问题，可是在动态交互方面，似乎不起作用，obj.VMLObject就是一个DOM对象，可是对于onmouseover,onmouseout等等的设置如果直接使用appendChild的方式的时候，根本无法起作用。而通过设置innerHTML来生成VML图形的时候，那些鼠标事件却可以响应，有过这个方面编程的朋友麻烦告诉我具体的原因如何。
function
HoverPie
(
el){}
function
RestorePie
(
el){}
function
LegendMouseOverEvent
(){}
function
LegendMouseOutEvent
(){}
这四个函数就是提供了简单的交互作用。具体的代码如下:
function
HoverPie
(
el){
var v_length=500;
var x_cur=Math.cos( el._scale * Math.PI /180);
var y_cur=Math.sin (el._scale * Math.PI /180);
x=parseInt(x_cur *
v_length
);
y=parseInt(y_cur * v_length);
el.style.top=4000 -y;
el.style.left=1000 +x;
el.strokecolor="black";
}
function
RestorePie
(
el){
el.style.top=4000;
el.style.left=1000;
el.strokecolor="white";
}
function
LegendMouseOverEvent
(){
var eSrc=window.event.srcElement;
var vPie=document.all(eSrc.element);
HoverPie(vPie);
}
function
LegendMouseOutEvent
(){
var eSrc=window.event.srcElement;
var vPie=document.all(eSrc.element);
RestorePie(vPie);
}
HoverPie提供了简单的图形相对位移的功能.
5． VMLPie.prototype.Zoom
提供了图形的放大和缩小的功能，既然是作为矢量图形，那么其放大和缩小就应该是没有任何图像损失的，实现的原理很简单，只需要修改group的坐标系统就可以实现，这个也就是我一直强调的需要将shape都放到group中的主要原因，对于文字，指能够使用和html Dom相同的方式进行设置。
VMLPie
.
prototype
.
Zoom
=
function
(
iValue
){
var
vX
=
21600
;
var
vY
=
21600
;
this
.
VMLObject
=
document.all
(
this
.
id
);
this
.
VMLObject
.
coordsize
=
parseInt
(
vX
/
iValue
) +
","
+
parseInt
(
vY
/
iValue
);
var
this
.
VMLObject
.
getElementsByTagName
(
"TEXTBOX"
);
for
(
var
i
=
0
;
i
<
texts
.
length;i
++){
if
(
texts
[
i
].
preSize
){
texts[i
].
style.fontSize
=
parseInt
(
texts
[
i
].
preSize
) *
iValue
+
"px"
;
}
else
{
texts[i
].
style.fontSize
=
12
*
iValue
+
"px"
;
