利用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
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
<p> <span style="font-size:14px;color:#337FE5;">【为什么学爬虫?】</span> </p> <p> <span style="font-size:14px;">       1、爬虫入手容易,但是深入较难,如何写出高效率的爬虫,如何写出灵活性高可扩展的爬虫都是一项技术活。另外在爬虫过程中,经常容易遇到被反爬虫,比如字体反爬、IP识别、验证码等,如何层层攻克难点拿到想要的数据,这门课程,你都能学到!</span> </p> <p> <span style="font-size:14px;">       2、如果是作为一个其他行业的开发者,比如app开发,web开发,学习爬虫能让你加强对技术的认知,能够开发出更加安全的软件和网站</span> </p> <p> <br /> </p> <span style="font-size:14px;color:#337FE5;">【课程设计】</span> <p class="ql-long-10663260"> <span> </span> </p> <p class="ql-long-26664262" style="font-size:11pt;color:#494949;"> 一个完整的爬虫程序,无论大小,总体来说可以分成三个步骤,分别是: </p> <ol> <li class="" style="font-size:11pt;color:#494949;"> 网络请求:模拟浏览器的行为从网上抓取数据。 </li> <li class="" style="font-size:11pt;color:#494949;"> 数据解析:将请求下来的数据进行过滤,提取我们想要的数据。 </li> <li class="" style="font-size:11pt;color:#494949;"> 数据存储:将提取到的数据存储到硬盘或者内存中。比如用mysql数据库或者redis等。 </li> </ol> <p class="ql-long-26664262" style="font-size:11pt;color:#494949;"> 那么本课程也是按照这几个步骤循序渐进的进行讲解,带领学生完整的掌握每个步骤的技术。另外,因为爬虫的多样性,在爬取的过程中可能会发生被反爬、效率低下等。因此我们又增加了两个章节用来提高爬虫程序的灵活性,分别是: </p> <ol> <li class="" style="font-size:11pt;color:#494949;"> 爬虫进阶:包括IP代理,多线程爬虫,图形验证码识别、JS加密解密、动态网页爬虫、字体反爬识别等。 </li> <li class="" style="font-size:11pt;color:#494949;"> Scrapy和分布式爬虫:Scrapy框架、Scrapy-redis组件、分布式爬虫等。 </li> </ol> <p class="ql-long-26664262" style="font-size:11pt;color:#494949;"> 通过爬虫进阶的知识点我们能应付大量的反爬网站,而Scrapy框架作为一个专业的爬虫框架,使用他可以快速提高我们编写爬虫程序的效率和速度。另外如果一台机器不能满足你的需求,我们可以用分布式爬虫让多台机器帮助你快速爬取数据。 </p> <p style="font-size:11pt;color:#494949;">   </p> <p class="ql-long-26664262" style="font-size:11pt;color:#494949;"> 从基础爬虫到商业化应用爬虫,本套课程满足您的所有需求! </p> <p class="ql-long-26664262" style="font-size:11pt;color:#494949;"> <br /> </p> <p> <br /> </p> <p> <span style="font-size:14px;background-color:#FFFFFF;color:#337FE5;">【课程服务】</span> </p> <p> <span style="font-size:14px;">专属付费社群+定期答疑</span> </p> <p> <br /> </p> <p class="ql-long-24357476"> <span style="font-size:16px;"><br /> </span> </p> <p> <br /> </p> <p class="ql-long-24357476"> <span style="font-size:16px;"></span> </p>
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页

打赏

liuruhong

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

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

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

打赏作者

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

抵扣说明:

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

余额充值