利用vml制作统计图全攻略－－－－饼图的制作（四）

核心提示：我们现在就开始来看如上代码的实现，<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /> 1. 首先建立一个v:shape,left,top,width,height分别设置为1000px,

我们现在就开始来看如上代码的实现。<?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是比例。