vml

饼图(Pie)：Pie图在 VML 是个比较头痛的问题,可能是我的数学不太好的缘故吧!因为 VML 没有提供直接的 Pie (扇形) 语句,现在要画饼图的话只能自己计算坐标了,这要用到一些三角函数的知识。还要注意的是，JavaScript 的三角函都是以弧度为单位。所以，要把角度转换成弧度。
     苹果： 10%20%30%40%50%    梨： 5%10%20%30%40%    香蕉： %

    在写这个教程的之前，我还没有亲自画过 Pie 图，以为很简单，一步就可以完成，不过当我真的去画的时候，让我差点一个晚上没有睡觉(目瞪口呆，口水直流)。
    我先研究 http://www.w3.org/TR/NOTE-VML 里面有写关于 path 里面的 ae (AngleEllipseTo) 命令(MSDN里面都没有关于这些命令，3w 全部命令都有)。那个命令确实可以很简单的完成，但它有 6 个参数，最后两个参赛很难理解。因为在一些例子中，这两个数非常大，五六位之多。不得其解，不得不放弃这个命令(一个晚上过去了)。

    优快云上的网友 emu(ston) 提出的问题，还有他最后完成的 Pie 图，给我了一些启发，他的做法是用 PolyLine 画曲线，这样的方法确实可行，不过如果精度太底，曲线就不平滑了。我发现 path 里面的 ar 命令就是用来画弧线的。问题终于解决了。现在讲讲 ar 命令的使用。
     ar left,top,right,bottom start(x,y) end(x,y) 共六个参数。前面四个参数分别是整圆的左上角和右下角坐标。这样就确定了弧的范围。后面两个参数是弧的开始坐标和结束坐标。在知道角度和半径的时候，最后两个参数是很好求的。下面的代码可以画一个扇形，sa,ea,用来确定起始角度和结束角度，注意，这里用角度，在函数里面我再把角度换算成弧度的。color 是颜色， n 是一些提示信息：

var r=2000; //半径
function createPie(sa,ea,color,n)
{
  var fs=Math.PI*2*(sa/360); //角度转换成弧度
  var fe=Math.PI*2*(ea/360);
  var sx=parseInt(r*Math.sin(fs));
  var sy=parseInt(-r*Math.cos(fs)); //注意这里有个负号，因为VML的坐标第四像限相当于数学中的第一像限
  var ex=parseInt(r*Math.sin(fe));
  var ey=parseInt(-r*Math.cos(fe));
  var strPie="<v:shape title='"+ n+"' style='position:absolute;z-index:8;width:"+2* r+";height:"+2* r+"'"
    +" CoordSize='4000,4000' strokeweight='1pt' fillcolor='"+ color+"'"
    +"path='m0,0 l "+ sx+","+ sy+" ar -2000,-2000,2000,2000,"+ex+","+ey+","+sx+","+sy+" l0,0 x e' />";
  var newPie=document.createElement(strPie);
  group1.insertBefore(newPie);
}

    数据图表到这里就介绍完了，可能还有其他形式的图表，不过有了前面三个例子，其他的我相信大家都能知道该怎么做的。接下来的一节将介绍 VML 一个应用广泛的 矢量地图。