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是坐标值和数据的比例)

画图表的准备工作已经全部做好了，现在就差数据了。有了数据，把数据灌输到 PolyLine 里面，曲线就显示出来了。现在我们使用一些假数据，看看上面的效果如何！
本节例子比较多，请访问下页。

数据图表二

     柱状图：柱状图是由矩形组成的，量体现在它的高度上。我们还是先画坐标，因为柱状图主要体现它的高度，所以一般只画横坐标线。


0
    你可以点右键查看源代码。可以得到一些方法，不过我编写这些的时候，特别是数据和坐标转换还没有找到通用的规律。所以需要耐心去拼凑。你在应用VML做图表的时候，首先生成坐标，然后根据 x ,y 的范围，把横纵坐标轴化分一下，然后就可以根据化分的结果就可以得到 x,y 坐标和值的关系了。
    接下来将讲饼图(Pie)。

数据图表三

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

    在写这个教程的之前，我还没有亲自画过 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 一个应用广泛的矢量地图。

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

你可能感兴趣的:(vml)