Vml:美洲豹系列教程之十一(数据图表)

数据图表一     现在我们来看看VML的一些应用。数据图表可以说是VML的拿手好菜。绘制图表，最重要的步骤是把数据转换成坐标。由于VML是矢量的，给数据的取值范围有很大的自由度，因为你可以用带小数的坐标值，也可以是非常大的数据做为坐标值。     在做图表之前，必须明确一些事情，要把图表看成一个整体，这意味着使用 Group 将 VML 包容起来；x,y 轴是在第四像限里面的；VML的大小由 width,height 决定，而不是由coordsize决定。接下来，让我们看看几个经典的图表。     曲线图(走势图)：看起来是曲线，其实细分起来就是一段段小折线组成的。所以我们可以选择PolyLine来做。首先我们来画坐标轴： <v:group ID="group1" style="WIDTH:500pt;HEIGHT:300pt" coordsize="5000,3000">   <v:line from="200,100" to="200,2800" style="Z-INDEX:8;POSITION:absolute" strokeweight="1pt">     <v:stroke StartArrow="classic"/>   </v:line>   <v:line from="200,2800" to="4800,2800" style="Z-INDEX:8;POSITION:absolute" strokeweight="1pt">     <v:stroke EndArrow="classic"/>   </v:line>   <v:rect style="WIDTH:4900px;HEIGHT:3000px" coordsize="21600,21600" fillcolor="white" strokecolor="black" /> </group>     也许你希望显示坐标轴上的刻度，这也很容易实现，我们可以用一个绝对定位的P来做坐标，在Group里面，使用绝对实际上是相对Group的相对定位的。坐标值需要你自己调整了。因为我们画分横坐标使用的是 px=200+73*i;(其中200是距离左边的距离) 纵坐标是 py=2800-73*i; (因为总共的高度是2800,所以要用减去)现在，把数据转换成坐标变得很容易了。当然这里的 i 是 0,1,2..7 ，也可以是你具体的数据，换算的时候，只需要按照比例得到坐标值，比如说你的纵坐标的价值是从 100，200，300，..700 相应的反应到坐标上就是 px=200+73*i*1/100 (其中,i为数据值,1/100是坐标值和数据的比例) 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 8 9 10 11 12     画图表的准备工作已经全部做好了，现在就差数据了。有了数据，把数据灌输到 PolyLine 里面，曲线就显示出来了。现在我们使用一些假数据，看看上面的效果如何！点这里显示曲线     本节例子比较多，请访问下页。 数据图表二     柱状图：柱状图是由矩形组成的，量体现在它的高度上。我们还是先画坐标，因为柱状图主要体现它的高度，所以一般只画横坐标线。     显示柱状图 0     你可以点右键查看源代码。可以得到一些方法，不过我编写这些的时候，特别是数据和坐标转换还没有找到通用的规律。所以需要耐心去拼凑。你在应用VML做图表的时候，首先生成坐标，然后根据 x ,y 的范围，把横纵坐标轴化分一下，然后就可以根据化分的结果就可以得到 x,y 坐标和值的关系了。     接下来将讲饼图(Pie)。 数据图表三     饼图(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 个参数，最后两个参赛很难理解。因为在一些例子中，这两个数非常大，五六位之多。不得其解，不得不放弃这个命令(一个晚上过去了)。     CSDN上的网友 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);   group3.insertBefore(newPie); }     数据图表到这里就介绍完了，可能还有其他形式的图表，不过有了前面三个例子，其他的我相信大家都能知道该怎么做的。接下来的一节将介绍 VML 一个应用广泛的 矢量地图。