利用vml制作统计图全攻略----饼图的制作（一）

利用vml制作统计图全攻略

----饼图的制作        

 

作者：蓝翼  CSDN账号:liuruhong(蓝色街灯)

电子邮件： liuruhong@263.net   MSN: blueswing_liu@hotmail.com
关键字: VML Javascript OOP 统计图

提要：

    VML是Microsoft IE 5.0及其后续版本内嵌的矢量图形实现，虽然MS也提倡日后使用SVG，但是作为一个IE内嵌的标记语言，在某些时候的应用还是比较方便的。本文通过完整的描述一个统计饼图的建立过程，来展现VML在Web方面的魅力。文章通过实现一个JavaScript类，读者能够完整地看到整个饼图的制作过程。

 

    VML(Vector Markup Language)自从问世以来似乎都处于默默无闻的地步，直到现在为止，情况依然没有改变。其实细心的一点你就可以发现，在Web方面，MS得很多产品还是内置使用了，最典型的就是Office的自选图形，将word或者ppt文档存储成html，如果文档内部使用了自选图形，你就可以看到那些图形使用过VML来表述的，另外一个典型的应用就是Visio的导出到web这个工具。

 

    前段时间，James在CSDN发表了使用ASP生成统计图的例子，我也认真拜读了其中的代码，并且也针对一些问题找他请教了，James的颜色感觉非常好，可惜我没有那样的功底，因此在代码实现中我就使用了随机颜色来实现，可能整体的界面看起来会稍微差劲一点。

 

    统计图比较典型的是饼图，柱状图，曲线图，本文着重讲解Pie的制作过程，文章采用了JavaScript实现了一个类，如果相关Javascript面向对象不是特别了解的，可以参考我另外的文章《面向对象的Javascript编程》和《再论面向对象的JavaScript编程》。

      

       暂且不考虑如何实现，我们先看看代码最终的使用如何。

 

      objPie=new VMLPie("600px","450px","人口统计图"); //初始化宽度，高度，标题
    
    

         objPie.BorderWidth=3; //图表边框
    
    

         objPie.BorderColor="blue"; //图表边框颜色
    
    

         objPie.Width="800px"; //定义图表宽度
    
    

         objPie.Height="600px"; //定义图表高度        
    
    

         objPie.backgroundColor="#ffffff"; //定义背景颜色
    
    

         objPie.Shadow=true; //是否需要阴影 true为是 false为不要阴影
    
    

         //