利用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为不要阴影
    
         //添加图表数据
    
         //顺序为名称,值,描述
    
         objPie.AddData("北京",50,"北京的人口");
   
         objPie.AddData("上海",52,"上海的固定人口");
   
         objPie.AddData("天津",30,"天津的外地人口");
   
         objPie.AddData("西安",58,"西安城市人口");
   
         objPie.AddData("武汉",30,"武汉的外地人口");
   
         objPie.AddData("重庆",58,"重庆城市人口");
   
         result.innerHTML=objPie.Draw(); //生成VML数据
    

 

       这段代码就是最终的调用,我封装了一个VMLPieJavaScript类,而本文的重点也就是详细地描述类的具体实现过程,另外要使用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:group1/10宽度的位置。

2.     V:Rect

定义一个矩形元素,fillcolor表示填充的背景颜色,stokecolor表示边框颜色,strokeweight表示边框宽度

3.     V:Shape

VML提供的默认形状元素,通过定义path可以定义出需要的任何形状,至于path的用法,可以参考w 3c 的文档。

4.     V:Fill

作为shape的子元素,用来设置shape的背景效果,通过type来设置填充的方法,具体用法如下

1      solid:实心填充,通过color设置填充颜色

2      gradient:线状渐变,这个时候需要colorcolor2这两个参数来设置渐变的开始颜色和结束颜色,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是一个非常好的参考资料。W 3c note比较抽象,在做一些比较深入的开发的时候,也是一个非常重要的参考。

  • 0
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论

打赏作者

liuruhong

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值