基于VML生成WEB统计图表的研究与实现论文毕业设计（论文)word格式

1、梧 州 学 院毕 业 论 文 论文题目 基于vml生成web统计图表 的研究与实现 系 别 计算机与电子信息工程系 专 业 计算机科学与技术 班 级 学 号 学生姓名 指导教师（签名） 完成时间 2009 年 5 月摘要 计算机图形学是计算机科学最活跃的分支之一，它伴随着计算机科学技术的发展而发展。如今，计算机图形学已经深深的扎根于现代社会的各个方面，被广泛应用于计算机动画、科学计算可视化、cad/cam、影视娱乐等领域。vml是一门全新的图形编程语言, 相当于ie里面的画笔，而且结合脚本，可以让图形产生动态的效果，同时也是未来3d网页制作的主要编程语言之一。本文通过基于vml生成web统计图

2、表的研究与实现，着重阐述了如何利用vml语言实现在线绘制几何矢量图形并实现图形算法。本文首先对web图表开发主要的gml、svg、vml这三种语言进行比较,然后使用ie 5.0提供的vml解析器,说明vml的基本语法,探讨使用vml等技术实现web图形系统的可能性,同时给出了一些原型实例。关键词: 矢量图形 vml 动态脚本 the research and achievement about the vml language to create spatial web chartabstractwith the development of computer technology, comp

3、uter graphic is a branch of one the most active science. today computer graphic has been deeply rooted in all aspects of modern society and is widely used in animation, scientific visualization, cad/cam, video detainment, and other fields.the vml language is a new graphic program. it s a marking pro

4、gram language like a paint or on ie and only can be carried out by ie5.0 as well as up of 5.0 edition. you can draw sketches that you want and get the sketch dynamic result.to create the spatial web chart. gml、svg、vml are compared firstly. some basic semantics are explained by u sing the vml render

5、provided by ie 5.0, and possibility of using vml and other techniques to implement web graphic system is researched. at the same time, some pro type examples are given.key words: vector graphics vector markup language dynamical scripts目录第一章 前言11.1 研究的背景11.2 研究的目的11.3 研究的内容2第二章 可行性研究分析32.1 web数据库应用系统

6、32.2 web信息系统的发展32.3 web图表开发应用语言的定义32.4 基于gml、svg、vml这三种语言的比较4第三章 目前的主要技术53.1 html与asp的结合53.2 vml语言6第四章vml的基本用法84.1 vml基本语法84.2 vml的常用标记94.3 图形与图像算法在vml中的实现104.4 asp结合vml动态开发原理12第五章 程序实现135.1任务概述135.2用户的特点135.3需求规定135.4 web统计图表的实现：145.5 web统计图表的开发与设计：155.6 运行环境规定155.7 实现程序实例：165.7.1 vml网页画图画板：165.7.2

7、学生选课投票统计：（2d饼型图转换为3d柱型图）205.7.3电压合格率实时曲线走势图：（2d曲线图）245.7.4 web综合图表的实现（asp+vml的结合）：27第六章 总结与展望356.1 总结356.2 展望35参考文献36附录37致谢42第一章 前言1.1 研究的背景随着internet信息系统逐渐向web的迁移和基于web的电子商务系统的发展，web设计和开发人员已经越来越将注意力集中到web应用程序上，而非最初的web内容创作和编辑排版。web应用程序更关注的是数据以及如何将数据抽取成信息、将信息转化成知识以为管理提供帮助。管理者需要以更直观、更形象的可视化方式将数据抽取为信息

8、，然后根据自己的理解将信息转化成知识。web图表是一种很好的将对象属性数据直观、形象地“可视化”的手段。可视化（visualization）技术使得人们能够在三维图形世界中直接对具有形体的信息进行操作，和计算机直接交流。这种技术已经把人和机器的力量以一种直觉而自然的方式加以统一，这种革命性的变化无疑将极大地提高人们的工作效率。可视化技术赋予人们一种仿真的、三维的并且具有实时交互的能力，这样人们可以在三维图形世界中用以前不可想象的手段来获取信息或发挥自己创造性的思维。计算机图形学是计算机科学领域中的一个重要而又年轻的学科，它是随着计算机硬件特别是图形显示设备的发展而逐渐产生发展起来的。随着计算机

9、网络的不断发展，图形图像更多的在web中使用，由于用图形图像表达各种信息，其容量大、直观方便，更符合人们观察了解事物运动规律的习惯，研究实现web统计图表尤为适合人们的需要。目前，计算机图形学在工业、商业、军事、教育和影视娱乐等各个领域得到了广泛应用，已成为计算机科学中发展最快、影响最大的学科之一，并在应用中日益显示出其重要性和不可替代性。所以，图形图像的研究必将在许多科学领域内有其深远的影响和意义。1.2 研究的目的本次研究是基于vml语言生成web统计图表的研究与实现，深入研究实现web统计图表技术，分析vml与其他技术比较所具备的优点，探讨web图表的基本理论和设计原则，并给出具体的实现

10、方法，使得用户和管理者对vml语言生成web统计图表的广泛应用有比较深刻的认识。作为一门专业的web绘图编程语言-vml(the vector markup language)矢量可标记语言是微软公司于1999年9月附带ie5.0发布的。这是一门全新的图形编程语言，尽管目前业界关注的人士比较少但随着web应用的不断发展，这种以文本形式存储图形的标记语言已呈现出它不可抵挡的优势和魅力。它相当于ie里面的画笔，而且结合脚本，可以让图形产生动态的效果，同时也是未来3d网页制作的主要编程语言之一。web 数据库应用系统中 ,有时需要有一些统计数据图形给用户传达准确 、直观的数据信息 。利用 html

11、来添加图形的传统做法 ,由于受存储形式限制 ,其下载速度慢 ,且不能进行放大 、缩小等功能 。单纯采用 html 不能很好地表示矢量图形 ,不能解决这方面的问题 。采用 vml 能够为这一问题提供合理的解决方案 。利用 vml 结合 asp 访问数据库 ,动态生成客户端脚本 ,绘制出矢量图形 。结果表明采用这种方式能够充分发挥 asp 的优势 ,并能表示出形象生动 、可放大缩小而不影响图像质量的矢量图形 。最后结合一个实例 ,绘制了数据项统计比较走势图 ,具有较强的表现力 。充分表明采用vml 绘制矢量图形具有极大的优势 。1.3 研究的内容1.3.1本次预期研究的重点是：(1)研究实现web

12、统计图表的技术，分析vml与其他技术比较所具备的优点。(2)用vml实现柱形图，饼形图，曲线走势图等效果。1.3.2研究的难点是：做一个vml网页画图画板，能实现动态画图，例如可以画直线，矩形，圆形，椭圆，圆形，还可以编辑文字，插入图片等等；学生选课投票统计数据在web中显示，数据是以柱形图和饼形图实现；电压合格率实时曲线在web中显示某个时段的电压合格率；数据是以曲线走势图实现；最后设计一个web综合图表的实现，采用asp+vml语言实现在网页中输入数据，实现3d柱形图，饼形图，曲线走势图年度统计等效果。第二章 可行性研究分析2.1 web数据库应用系统在web数据库应用系统的开发过程中,需

13、要给用户提供直观 、美观的诸如柱型图、饼图、实时曲线图等的数据统计图,使用户能够方便地查看数据分布、变化的实时过程。在常用的网络编程语言中,通常采用其内植的绘图 api来实现统计图形的绘制。但是其存在着明显的缺陷:通常产生 gif 或 jpg 等类型的图片 ,与 web 其他部分不能很好地融合 ;图片下载速度较慢 ;非矢量图形不能随意放大或者缩小（比较容易失真）;重用性差。矢量图具有不受设备分辨率影响、显示画面清晰、可对图像无限缩放而不会影响图像品质的优点 。传统的语言不能很好解决这方面的问题 ,而使用 vml语言为该问题的解决提供了比较好的解决方案 。2.2 web信息系统的发展随着inte

14、rnet信息系统逐渐向web的迁移和基于web的电子商务系统的发展，web设计和开发人员已经越来越将注意力集中到web应用程序上，而非最初的web内容创作和编辑排版。web应用程序更关注的是数据以及如何将数据抽取成信息、将信息转化成知识以为管理提供帮助。管理者需要以更直观、更形象的可视化方式将数据抽取为信息，然后根据自己的理解将信息转化成知识。web图表是一种很好的将对象属性数据直观、形象地“可视化”的手段。2.3 web图表开发应用语言的定义1. gml(geographymarkuplanguage)：是基于xml的空间信息编码标准，由opengisconsortium(ogc)提出，得到

15、了许多公司的大力支持，如oracle、galdos、mapinfo、cubewerx等。2. svg(scalablevectorgraphics)：svg图像是与xml1.0兼容的文档，svg元素是指示如何绘制图像的一些指令，阅读器(viewer)解释这些指令，把svg图像在指定设备上显示出来。3. vml(vectormarkuplanguage)：现在系统ie5.0以上版本对vml提供支持，它编写简单、浏览器可以解析、与html等语言完全兼容，它更具有实际web页应用的可行性、深层开发的可行性。2.4 基于gml、svg、vml这三种语言的比较web图表的设计和开发主要是基于gml、sv

16、g、vml这三种语言，且都是基于xml的可用来描述矢量图形的标记语言，但它们都有各自不同的用途和特点：1. gml(geographymarkuplanguage)：是基于xml的空间信息编码标准，由opengisconsortium(ogc)提出，得到了许多公司的大力支持，如oracle、galdos、mapinfo、cubewerx等。运用gml，封装的地理数据和图形解释是清楚分离的。2. svg(scalablevectorgraphics)：svg图像是与xml1.0兼容的文档，svg元素是指示如何绘制图像的一些指令，阅读器(viewer)解释这些指令，把svg图像在指定设备上显示出来

17、。使用svg可以在网页上显示出各种各样的高质量的矢量图形，支持很多您想象得出的功能：几何图形、动画、渐变色、滤镜效果等。最关键的是，它也是完全用普通文本来描述的！也就是说，这是一种专门为网络而设计的基于文本的图像格式。3. vml(vectormarkuplanguage)：现在也只有ie5.0以上版本对vml提供支持。使用vml可以在ie中绘制矢量图形，所以有人认为vml就是在ie中实现了画笔的功能。vml具有先天的优势，它的表示方法简单，易于扩展，支持高质量的矢量图形显示，vml我感觉相当健全(图型质量、输出速度)，它编写简单、浏览器可以解析、与html等语言完全兼容，它更具有实际web页

18、应用的可行性、深层开发的可行性。4. gml、svg、vml这三种语言都与矢量图形有着密切的关系：gml在表示实体的空间信息的同时加入了实体的其他属性信息，是表示实体的空间信息和属性的编码标准，但它并不支持直接显示图形。而vml和svg是在表示图形的矢量信息同时加入了图形的显示信息（即以什么样的样式显示矢量图形），是显示矢量图形的两种比较好的格式。相比之下，svg是综合了vml的优点后推出的，是国际标准，它比vml具有更多的优点，也有更广阔的前景。但由于vml有ie的支持，而svg要想在浏览器中显示就需要安装插件，在这一点上，vml略优于svg，这也是我选择用采用vml语言实现web统计图表的

19、原因吧！第三章 目前的主要技术本次课题web统计图表的研究，我主要采用vml语言实现，还会使用到asp动态网页、dreamweaver2004开发工具和access2000数据库。asp是微软公司开发的代替cgi脚本程序的一种应用,它可以与数据库和其它程序进行交互，是一种简单、方便的编程工具，dreamweaver2004开发web功能强大,支持web应用与开发，access2000数据库是最常用的数据库了，且与vml语言兼容较高，具有实际应用的可行性和深层开发的可行性。3.1 html与asp的结合3.1.1 html语言html ( hypertext markup language ,

20、超文本标记语言) ,是一种用来制作超文本文档的简单标记语言 。用html 编写的超文本文档能独立于各种操作系统平台(如 unix ,windows 等) 。使用 html 语言描述的文件 ,需要通过 www 浏览器显示出效果 。通过 html 可以表现出图片调用 、文字显示等丰富多彩的设计风格 ,可以实现不同页面之间的跳转和展现丰富多彩的多媒体效果等功能 。在 microsoft 的产品中 ,网页与数据库结合的解决方案是 asp。尤其在电子商务网站的建设方面 ,几乎都是用asp 编写程序 。active server pages (asp) 是服务器端脚本编写环境 ,使用它可以创建和运行动态

21、、交互的 web 服务器应用程序 。使用 asp 可以组合 html 页 、vbscript 脚本命令和javascript 脚本命令等 ,以创建交互的 web 页和基于 web的功能强大的应用程序。asp可以使用 ado ( active data object ,主动数据对象) 进行 access 和 sql server 数据库的连接访问 ,取出数据库中的数据进行各种操作 ,同时也能读取其他 odbc 兼容的数据库 。由于asp是经过服务器解析之后再向浏览器返回数据 , 所有嵌入在html 中的程序都在服务器端执行 ,所以有了 asp 就不必担心客户的浏览器是否能运行编写的代码 。当程序

22、执行完毕后 ,服务器仅将执行的结果返回给客户浏览器 ,这样就减轻了客户端浏览器的负担 ,大大提高了交互的速度 。但是这样导致一个问题 , 运行 asp 页面比普通的html 页面要慢 。因为普通的 html 页面只需要浏览器就能够解析 ,而 asp 则必须是服务器将整页的代码都执行一遍之后再发送数据 。这样增加了服务器的负担 ,降低了客户端的效率。为弥补这一缺点 ,通过 asp 连接访问数据库 ,并对数据进行操作;在客户端采用 vml方式对获得的数据进行动态矢量绘图 。3.1.2 html语言的局限性html以简单精炼的语法,极易掌握的通用性与易学性,使web网页得到了极快的推广。html过份

23、限制了web文件的复杂性与灵活性,使人们面对复杂多变的具体应用束手无策。人们开始全力重新构造web图表,诞生了许多新的技术。vm l语言就是其中最引人注目的一项技术。3.2 vml语言3.2.1 vml简介vml（vector markup language）是微软1999年9月附带ie5.0发布的。它以最简洁的标记代码，在web页快速绘制输出矢量图型（线段、圆形、矩形、圆矩形、矢量图像、曲线、多边形、弧型）、并修饰这些图形的（边框、阴影、填充、背景、渐变、箭头、3d）等等外观效果。能井然有序跟html超文本紧密结合，或搀杂在html标签内，或把html标签囊括其中充当内容。几乎支持css2样

24、式表所有的样式属性（宽度、高度、3d-xyz位置、鼠标形状、裁剪、排版缩进、缩放等等）。vml所绘制的每一个图形，都跟html一样是一个图形对象，同样支持dhtml对象编程模型、dhtml事件编程模型。轻松的读取、更改vml图形对象的各种属性，响应用户触发的鼠标、键盘等事件，实现与用户交互。如果有机的配合settimeout、setinterval两个定时器方法，则能实现类似flash一样复杂的动画，输出质量相当的好。只要dhtml、js编程功底足够深，任何复杂的动画都可以实现。3.2.2 vml语言的好处使用 vml可以在 ie 中绘制矢量图形 ,能将图形信息与文本信息及其他数据集成在一起

25、,是一种用文本方式描述矢量图形的语言 。vml 在 web 上建立的高效 、灵活和简洁的矢量图形可以任意放大缩小而不损失图形的质量 ,在制作地图上有很大用途 。结合一种网络编程语言就能设计出动态的统计图形 。并能够结合客户端脚本 , 让图形产生动态的效果 。在数据交互的过程中 ,服务器只须将变化的数据发送到客户端即可 。不仅易于对绘制的图形进行控制 ,而且充分利用了客户端的资源 ,减轻了服务器的负荷 。其基本规则是 :单个的元素被定义为形状 , 大多数形状是由矢量路径描述的 ,它提供了一些预定义的形状如直线 、曲线等 。vml形状可以单独产生 ,也可多个形状相关 。因为各个形状本身都包含了自身

26、的特征比率信息 ,所以整个组可以扩展而不会影响到其中包含的内容 。3.2.3 vml语言的特点xml是公认的拥有无穷生命力的下一代网络标记语言 ,xml 和 html 一起使用 ,极大地扩展了 web 页面的能力, vml作为xml的一个子集 , 具有先天的优势 ,它的表示方法简单 ,易于扩展 。支持高质量的矢量图形显示 ,它们基于由相连接的直线和曲线描述路径。在vml语言中使用两个基本的元素 : shape 和group ,这两个元素定义了 vml 语言的全部结构 。shape 描述一个矢量图形元素 ,而 group 用来将这些图形结合起来 ,这样它们可以作为一个整体进行处理 。vml语言规

27、范包括大量的支持多种不同矢量图形特征的元素 。其预定义的主要图形元素有：shape , path , line , polyline , curve , rect , roundrect , oval ,arc , group 。同时由于 vml语言使用简单的文本来表示图像 ,这样就可用很少的字节 来表示比较复杂的图像。vml与html 的兼容 , 通过在 html 中声明 vml命名空间并声明处理函数 ,就可以和其他 html元素一样使用 vml元素 ,在客户端浏览器显示图像。vml标记里面可以定义dhtml大部分属性和事件,比如id, name , title ,on mouseover等

28、等。3.2.4 vml语言的应用vml语言究竟能在web页中做些什么呢！下面作简单的应用介绍吧：1. 圆角表格、表格斜线、圆形、曲线等等，是做为html语言的补足；2. 数据图表(饼图、柱状图、曲线图)、图像处理(vml可将图像矢量化，能进行亮度、对比度、色彩度、漫画风格、图像造型、颜色融合的处理)、图像绘制;3. 制作3d网页、vml动画特技、vmlflash动画、vml游戏。vml语言应用功能强大，无不让程序开发者们怦然心动啊！第四章vml的基本用法4.1 vml基本语法在vml语言里面,标记使用的是xml语言的扩张,namespace (命名空间) ,可以使用惯用的“v间,并且把它和系统

29、预定义的行为vml用ie5.0到ie6.0版本通用的定义如下:v : behavior : url ( # default # vml ) 其中xmlns是指xml namespacebehavior (行为)是ie5.0新推出的,它把命名空间“v统预定义的行为vml连接 。这样定义以后,v的应用中使用如下标记: 这个标记必须是成对出现 。和普通的html别,每个标记都增加了一个命名空间。vml有自己的坐标系,使用coordsize定义坐标,这样动态改变它的坐标,就可以实现随意放大 、缩小 、旋转等功能 。shape对象是vml最基本的对象,是path ,利用它可以画出所有想要的图形 。sha

30、pe生出来的一些对象,比如说rect (矩形) , roundrect (矩形) ,oval (圆) ,line (线) , polyline (不规则折线(图形文件)等等 。group容器能让一系列的vml元素对象,如果使用了超过一个vml对象的页面都使用容器,同时可以通过动态改变它的coordsize的大小和整个group里面的vml元素对象。初始化和数据读取的过程 。主页面中带有脚本,如增加vml元素的功能。子页面是个asp程序,从库中读取出数据,生成相应的脚本：function draw graph ( x ,y ,value)然后就是在body用一个iframe做后台,用来读取数据库

31、中的数据;为命名空进行连接 。使也就是命名空间。”和系就可以在后标记有所区属性就是用来它最主要的属性对象派圆角) , image对象使用共同的坐标group值放大或缩下面就是定义绘制图形的脚本函数以及进行页面初可以实现诸从数据中初始化脚本和读取数据 。可以使前台用脚本生成 ： 由于可能会产生后台已完成读数据操作 ,而前台还没有初始化的情况 ,因此把脚本放在 body 的前面 , iframe 放在 body 的最后面 。相应的在 readdata. asp里面 :parent.draw graph ( , , ) ;这样就实现了读取数据库中的数据并运行脚本语言进行画图的功能 。4.2 vml的

32、常用标记vml是通过xml标记来描述矢量图形的，所以必须遵循一定规则，和html标记的通用属性（如:id、name、class、title、style）等一样，vml标记也有自己的通用属性、支持html的通用属性、支持css的样式定义。通过这些属性，我们可以修饰vml图形（如线、圆形）的形状、大小、颜色、内容、边框，以及定义鼠标样式、编程用的id索引、提示标题等等。标记特有的通用属性（非html、css所有）vm标记属性表属性名默认值值类型/范围用途strokeweight 0.75pt=1px number描述图形的边框粗度strokecolor black color描述图形的边框颜色st

33、roked true boolean描述图形是否使用边框fillcolor white color描述图形的背景颜色filled true boolean描述图形是否使用背景print true boolean描述图形是否允许被打印机打印coordsize 1000,1000 vector2d暗示图形与容器空间的大小比例coordorigin 0 0 vector2dcoordinate at top-left cornerof elementwrapcoords null stringoutline to use for tight textwrapping16 vml标记属性表属性名可用值

34、/可用值范围用途width 0-9999描述宽度height 0-9999描述高度position static absolute fixed relative描述如何定位输出left 0-9999描述距离页面位置左top 0-9999描述距离页面位置上z-index 0-9999描述3d位置cursor auto crosshair hand move help wait text描述鼠标形状zoom 0-99描述缩放比例clip rect(上右下左)描述裁剪对象border 0-99 style color描述边框display block none inline list-item描述显

35、示或隐藏overflow visible auto hidden scroll描述滚动条color colorstring描述文本内容颜色font-size 0-999描述文本内容字号filter xray flipv fliph invert alpha(opacity=num)描述滤镜效果rotation(0-9999)%360描述旋转度flip x y描述反转或颠倒图形4.3 图形与图像算法在vml中的实现自2003年微软公司发布vml2003.10版以后，vml语言不但对作图功能有了强大的改进而且对图形图像的处理也有了较强的提高。目前vml已经成为最强的网页编辑工具之一，能够完成基本的

36、三维网页的设计，做图及图形处理，并且支持高质量的图像显示。正因为vml基于xml标准而xml是公认拥有无穷生命力的下一代网络标记语言，所以vml具有先天的优势，它的表示方法简单，易于扩展等等。相比之下，gml（geography markuplanguage）、svg（scalable vector graphics）、vml都与矢量图形有着密切的关系。gml在表示实体的空间信息的同时加入了实体的其他属性信息，是表示实体的空间信息和属性的编码标准，但它并不支持直接显示图形。而vml和svg是在表示图形的矢量信息同时加入了图形的显示信息（即以什么样的样式显示矢量图形），是显示矢量图形的两种比较好

37、的格式。相比之下，svg是综合了vml的优点后推出的，是国际标准，它比vml具有更多的优点，也有更广阔的前景。但由于vml有ie的支持，而且有人认为vml就是ie中的画笔，而svg要想在浏览器中显示就需要安装插件，在这一点上，vml远远优于svg。二者都支持很多您想象得出的功能：绘制几何图形、动画、渐变色、滤镜效果等。在vml中使用两个基本的元素：shape和group。这两个元素定义了vml的全部结构；shape描述一个矢量图形元素，而group用来将这些图形结合起来，这样它们可以作为一个整体进行处理。以下是本文所涉及vml的图形元素有：shape、path、line、polyline、cu

38、rve、rect、roundrect、oval、arc、group等。由于内容太多太杂，只解释部分概念如下：line线标记、xyz坐标与单位概念：line标记可以在网页中从1个（x，y）交接点到另1个（x，y）交接点之间，创建一条直线。oval圆与rect矩型：vml的oval和rect分别可以绘制圆形与矩形。roundrect圆矩型arc圆弧image图片的插入与图像处理polyline多边型shape多边型与polyline多边型的优劣比较shapetype模版shape曲线background背景group集合容器：该标记不是用来输出某种图形的、运行时其本身也不可见，而且也没有专用属性，

39、只有vml通用属性，但却也是非常重要的、特殊的vml标记。它的作用就是充当“类似父或母”的身份将多个“类似儿女成员”的图形囊括其中，然后你可以单独性的描述“父母”，不必一个一个去控制“单个子女”，从而实现了“全员子女”继承“父母”的遗传。id,class,style(top,left,width,height,rotation,z-index,position,visibility,display),title,href,target,alt,coordsize,coordorigin等等属性。而在在实际应用中，最重要的是让“子女”继承css-style()括号里的属性。vmlframe图形引

40、用shadow阴影fill填充extrusion立体3d2级标记：上面所说到的vml通用属性，是针对像oval、rect、roundrect这样的一级标记而言的。而对于大多数的二级标记，是不支持的，只有一个例外，像textbox内容，即能当作一级标记又能当作二级标记。不过id这个通用属性，是所有的一、二级标记均支持的属性。textbox内容imagedata背景图片textpath文本路径vml规范包括大量的支持多种不同矢量图形特征的元素。由文本构成的图像，并可集成到html。由于vml使用简单的文本来表示图像，这样就可用很少的字节来表示比较复杂的图像。vml与html兼容，通过在html中声

41、明vml命名空间并声明处理函数，就可以和其他html元素一样使用vml元素，在客户端浏览器显示图像。vml标记里面可以定义dhtml大部分属性和事件，比如说id,name,title,onmouseover等等。支持交互与动画。但vml的功能不只是绘图，他还可以在图形中嵌入文本，并可实现超链，还可通过脚本语言实现一定的动画功能。4.4 asp结合vml动态开发原理asp 使用 ado 存取数据库 。而 ado 的实际数据存取操作是通过 oledb 或 odbc 驱动程序进行的 。使用ado 可以在 asp 中编写可以直接操作执行的 sql 语句来操作数据库 。其基本任务就是和数据库建立连接 、

42、向数据库发送 sql 语句 、处理数据库返回的结果 。图 1 为 asp 与 vml 结合的原理图 。数据层存放大量数据资源 。中间层为 web 服务器端 asp 动态程序 ,通过 oledb 或者 odbc 驱动的 ado 与数据库进行数据交互 ,负责从数据层中查询出所要的统计信息 。表示层采用vml 动态生成统计结果图表 ,在此采用页面中嵌入 vml语句和使用 asp 动态生成 vml 相结合的方式 ,动态生成表示统计结果的矢量统计图形 ,也就是生成了一个用文本语言表示的 web 矢量统计图 。图 1 asp 与 vml 结合原理图第五章 程序实现5.1任务概述5.1.1本次预期研究的重点

43、是：(1)研究实现web统计图表的技术，分析vml与其他技术比较所具备的优点。(2)用vml实现柱形图，饼形图，曲线走势图等效果。5.1.2 研究的难点是：做一个vml网页画图画板，能实现动态画图，例如可以画直线，矩形，圆形，椭圆，圆形，还可以编辑文字，插入图片等等；学生选课投票统计数据在web中显示，数据是以柱形图和饼形图实现；电压合格率实时曲线在web中显示某个时段的电压合格率；数据是以曲线走势图实现；最后设计一个web综合图表的实现，采用asp+vml语言实现在网页中输入数据，实现3d柱形图，饼形图，曲线走势图年度统计等效果。5.2用户的特点web图表是一种很好的将对象属性数据直观、形象

44、地“可视化”的手段。基于vml语言设计web统计图表，web统计图表对象属性数据直观，提供可视化数据，操作简单方便，数据分布走势一目了然，尤其适合各类使用计算机的管理人员。5.3需求规定本次设计研究主要是用vml语言实现柱形图，饼形图，曲线走势图等3d效果。5.3.1 web信息流程结构设计：信息组织、关联和集成等是一种非常重要的信息重构，它对信息的查询、浏览及信息间的相互联系起着关键作用，应采用基于人性化的信息联想思维方式来设计整个图表系统的信息流向及相互关系等。需要对用户在信息探索活动过程中的信息浏览顺序、信息交互方式和信息相关联想等问题进行深入研究，从而设计出一种为大多数用户所接受的图表

45、系统，即通过多种方式来建立信息间的关系链接。5.3.2 web统计图表类型的选择：web图表要表现的主题决定了图表的表现形式，根据主题来决定哪一种对比关系是主要的，哪一种是次要的。图表是通过数据（信息）的组织来展示或强调主题信息的。柱形图最适合显示时间序列的对比关系。一般情况下，尽量避免使用条形图显示随时间变化的信息特征，因为表示时间分布习惯于从左到右，而非从上到下。曲线走势图则侧重于变化趋势，比较适合反映对象发展趋势，而柱状图注重展示程度和数量，适合表示某一时间段内的信息属性。 饼形图给人以整体的印象，因此，显示成分对比关系可用饼图来展示。若数据项超过7个，可保留6个最重要部分，其余合并为“

46、其它”，以便使饼图发挥最大可视化效果。此外，根据需要，可将最重要的内容放在12点的位置附近（人眼习惯于顺时针方向看东西），同时可通过色彩、立体处理或分离等手段来突出显示。由于统计信息的多样性、复杂性，可通过图表间的相互叠加来展示信息间的内部构成对比、外部结构特征对比以及对象的时态变化特征等。5.3.3 web统计图表界面设计：一般地，图表尽可能简洁，如果需要采用组合图表结构，必须使图表层次化更为清晰，以便更为快速清楚地反映要表达的主题信息内容。由于web图表应用在网络上，应尽量考虑到各种用户计算机窗口的差异，将图表完整地显示在这些计算机的窗口上。例如：一致性是界面设计最基本的原则，它是界面易于

47、使用的关键，但有时为了让用户更直观地感受和理解图表要表现的主题，需要采用以下手段建立信息层次结构间的关系：加重色彩、运用阴影、增强对象轮廓、应用立体或写真符号、采用动态符号。另外，设计图表时，须全面考虑影响图表可视化的因素，内部数据数值对比反差的大小，图表在空间分布的密度以及小空间大图表矛盾等。5.4 web统计图表的实现：下面通过阐述vml中的常用标记来说明web图表的实现步骤：1. 使用group标记创建一个容器，作为其它组成web图表的vml标记的共同坐标系，通过设置group标记的style属性可以确定图表的位置和大小等；2. 通过添加rect、oval、arc、line、polyli

48、ne等形状标记创建图表的主体。其中，rect标记用于创建矩形，可由它来实现条形图和柱状图；oval标记用于创建圆，arc标记用于创建弧，结合这两个标记可以实现饼图；line标记用于创建线段，line标记是line标记的变形，用于创建不规则的连续的线段，这两个标记可用于创建折线图。另外，vml提供一种默认形状标记shape，通过指定其path属性可创建出需要的任何形状，上述所有标记都是由它派生出来的。在使用上述形状标记创建web图表主体时，可使用形状标记的子标记shadow和fill来分别设置形状的阴影和填充效果来增强形状的显示效果和不同形状的对比效果；3. 使用标记line及其子标记strok

49、e来创建坐标系。stroke标记中的startrow和endrow属性用于创建箭头；4. 使用标记textbox来设置图表的标题、图例和刻度的值。5.5 web统计图表的开发与设计：web图表设计是以用户为中心的多学科设计，受到视觉艺术、计算机技术、主题内容、图表用途以及心理感受和信息设计等多种影响。在对统计信息在可视化时的基本属性进行分析与研究后，给出web图表的定义：web图表泛指在浏览器中显示的，可直观展示统计信息属性（时间性、数量性等），对知识挖掘和信息直观生动感受起关键作用的图形结构。不同类型的web图表可能具有不同的构成要素，如折线图一般要有坐标轴，而饼图一般没有。归纳起来，web

50、图表的基本构成要素有：标题、刻度、图例和主体等等。5.6 运行环境规定5.6.1设备：采用个人计算机(pc)，使用系统windowsxp或windows2000，且支持ie5以上浏览器。5.6.2支持软件：本次课题web统计图表的研究，我主要采用vml语言实现，还会使用到asp动态网页、dreamweaver2004开发工具和access2000数据库。5.7 实现程序实例：5.7.1 vml网页画图画板：实现该网页画图画板用到了vml语言和js脚本语言，保存以html为后缀名的网页文件。其实现的一般步骤如下：1. 新建并命名vmldraw.js文件，用记事本进行编辑，该文件主要是用来定义变量

51、和函数，其伪代码：var vmltool=new vmldraw(); /定义vmldraw变量；function vmldraw()； /定义vmldraw功能；var imagemenu,imagemove=0,imagesets=new array(); /定义右键菜单；var baseimage()； /定义双箭头、单箭头、直线、弧形、圆形、长方形、圆矩形等使用样式；var left,top,width,height,rotation,id; /定义画板画图框架；var status; /定义在画板内0:删除,1:修改,2:增加；obutton=owner.createbutton()

52、； /定义双箭头、单箭头、直线、弧形、圆形、长方形、圆矩形等相关控件；还要定义一些功能控件:ocell.appendchild(document.createelement(br);obutton=owner.createbutton(ocell,biankuan,bon2,huabi,左键点击目标图形);obutton.innertext=边框;obutton=owner.createbutton(ocell,tianchong,bon2,huabi,左键点击目标图形，支持背景色填充、背景图片、完全空心化); obutton.innertext=填充;obutton=owner.createbutton(ocell,suofang,bon2,huabi,左键点击目标图形);obutton.innertext=缩放;2. 新建并命名vml画图画板.html文件，用记事本进行编辑，该文件主要是用vml实现画板画图和调用vmldraw.js文件，其伪代码：(1) vml画图画板 /定义画板标题(2) /定义画板风格v:*behavior:url(#default#vml); /v