利用vml制作统计图全攻略
----饼图的制作
作者：蓝翼 CSDN账号:liuruhong(蓝色街灯)
电子邮件： [email protected] MSN: [email protected]
关键字: 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为不要阴影
//添加图表数据
//顺序为名称，值，描述
objPie.AddData("北京",50,"北京的人口");
objPie.AddData("上海",52,"上海的固定人口");
objPie.AddData("天津",30,"天津的外地人口");
objPie.AddData("西安",58,"西安城市人口");
objPie.AddData("武汉",30,"武汉的外地人口");
objPie.AddData("重庆",58,"重庆城市人口");
result.innerHTML=objPie.Draw(); //生成VML数据
这段代码就是最终的调用，我封装了一个VMLPie的JavaScript类，而本文的重点也就是详细地描述类的具体实现过程，另外要使用VML必须作如下的声明。
1． HTML Tag的名字空间声明
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
2． <head>之间的style声明 <STYLE>
v\:* { BEHAVIOR: url(#default#VML) }
o\:* { BEHAVIOR: url(#default#VML) }
.shape { BEHAVIOR: url(#default#VML) }
</STYLE>
完成了上述工作之后，代码就能够完整的工作了。
现在我们开始讲述这个VMLPie的实现了，首先，我将那些实现的函数作一个简单的说明。 //VMLPic主函数，提供创建一个VMLPie实例
function VMLPie(pWidth,pHeight,pCaption,pContainer){}
//开始画图，将图形画到指定的容器上面
VMLPie.prototype.Draw=function(){}
//画饼图的各个块
VMLPie.prototype.CreatePie=function(){}
//接口功能：
// 放大或者缩小图形
//参数说明：
// iValue:放大的或者缩小的倍数，1为原图大小，0.5原图的50%，2为原图的
// 两倍，以此类推
VMLPie.prototype.Zoom=function (iValue){}
//接口功能：
// 添加饼图数据
//参数说明：
// sName:数据标签名称
// sValue:数据值
// sTooltipText:数据描述
VMLPie.prototype.AddData=function(sName,sValue,sTooltipText){}
//接口功能:
// 清除所有数据
VMLPie.prototype.Clear=function(){}
//以下四个函数是扩展使用，就是提供一些VML的交互
function HoverPie(el){}
function RestorePie(el){}
function LegendMouseOverEvent(){}
function LegendMouseOutEvent(){}
看完这些函数的说明，我想读者对于整个类的结构有一个大致的想法思路了吧，可是对于VML的制作，可能还是没有一个很清晰的思路吧，那么，下面我就着重介绍几个VML元素，我只是大致的介绍一些用法，具体的在 美洲豹的 《VML中文教程》有比较详细地介绍，如果有兴趣的话可以去参考参考。
1. V:Group
作为VML其它元素的容器，其属性coordsize定义其坐标大小，内部的元素的位置都只是相对于group元素所定义的coordsize，假设coordsize定义为21600,21600,就是定义了21600 * 21600的画布，如果内部有一个v:shape或者其它元素， shape.style.left=”2160px”,其实际位置只是在v:group的1/10宽度的位置。
2. V:Rect
定义一个矩形元素，fillcolor表示填充的背景颜色，stokecolor表示边框颜色，strokeweight表示边框宽度
3. V:Shape
VML提供的默认形状元素，通过定义path可以定义出需要的任何形状，至于path的用法，可以参考w3c的文档。
4. V:Fill
作为shape的子元素，用来设置shape的背景效果，通过type来设置填充的方法，具体用法如下
1） solid:实心填充,通过color设置填充颜色
2） gradient:线状渐变，这个时候需要color和color2这两个参数来设置渐变的开始颜色和结束颜色，Angle则设置渐变方向。
3） gradientradial：圆心渐变，其他的使用方法和gradient类似
4） tile:使用图片平铺，src设置图片
5） pattern:使用图片作为一个图章填充模式
6） frame：使用图片拉神填充
另外Opacity则用来设置透明度
5. V:Shadow
设置shape是否需要阴影，主要使用如下参数
ON:设置是否启用阴影
Color:阴影的颜色
Offset:阴影的偏离位置
6. V:TextBox
定义shape的文字区域
以上的这些元素是我在制作VMLPie需要使用到的，所以做了一个简单的介绍，具体的可以参考豹子的《VML中文教程》，另外MSDN里头的Vector Markup Language(VML)的SDK Document是一个非常好的参考资料。W3c的note比较抽象，在做一些比较深入的开发的时候，也是一个非常重要的参考。 
|
本类阅读TOP10