基于生成统计图表的研究与实现论文.docx
《基于生成统计图表的研究与实现论文.docx》由会员分享，可在线阅读，更多相关《基于生成统计图表的研究与实现论文.docx（50页珍藏版）》请在冰点文库上搜索。
基于生成统计图表的研究与实现论文
摘要
计算机图形学是计算机科学最活跃的分支之一，它伴随着计算机科学技术的发展而发展。
如今，计算机图形学已经深深的扎根于现代社会的各个方面，被广泛应用于计算机动画、科学计算可视化、CAD/CAM、影视娱乐等领域。
VML是一门全新的图形编程语言,相当于IE里面的画笔，而且结合脚本，可以让图形产生动态的效果，同时也是未来3D网页制作的主要编程语言之一。
本文通过基于VML生成WEB统计图表的研究与实现，着重阐述了如何利用VML语言实现在线绘制几何矢量图形并实现图形算法。
本文首先对Web图表开发主要的GML、SVG、VML这三种语言进行比较,然后使用IE5.0提供的VML解析器,说明VML的基本语法,探讨使用VML等技术实现Web图形系统的可能性,同时给出了一些原型实例。
关键词:
矢量图形VML动态脚本
TheresearchandachievementabouttheVMLlanguagetocreatespatialwebchart
Abstract
Withthedevelopmentofcomputertechnology,computergraphicisabranchofonethemostactivescience.Todaycomputergraphichasbeendeeplyrootedinallaspectsofmodernsocietyandiswidelyusedinanimation,scientificvisualization,CAD/CAM,videodetainment,andotherfields.
TheVMLlanguageisanewgraphicprogram.It`samarkingprogramlanguagelikeapaintoronIEandonlycanbecarriedoutbyIE5.0aswellasupof5.0edition.Youcandrawsketchesthatyouwantandgetthesketchdynamicresult.
Tocreatethespatialwebchart.GML、SVG、VMLarecomparedfirstly.SomebasicsemanticsareexplainedbyusingtheVMLrenderprovidedbyIE5.0,andpossibilityofusingVMLandothertechniquestoimplementWebgraphicsystemisresearched.Atthesametime,someprotypeexamplesaregiven.
Keywords:
vectorgraphicsvectormarkuplanguagedynamicalscripts
目录
第一章前言1
1.1研究的背景1
1.2研究的目的1
1.3研究的内容2
第二章可行性研究分析3
2.1Web数据库应用系统3
2.2Web信息系统的发展3
2.3Web图表开发应用语言的定义3
2.4基于GML、SVG、VML这三种语言的比较4
第三章目前的主要技术5
3.1HTML与ASP的结合5
3.2VML语言6
第四章VML的基本用法8
4.1VML基本语法8
4.2VML的常用标记9
4.3图形与图像算法在VML中的实现10
4.4ASP结合VML动态开发原理12
第五章程序实现13
5.1任务概述13
5.2用户的特点13
5.3需求规定13
5.4Web统计图表的实现：
14
5.5Web统计图表的开发与设计：
15
5.6运行环境规定15
5.7实现程序实例：
16
5.7.1VML网页画图画板：
16
5.7.2学生选课投票统计：
（2D饼型图转换为3D柱型图）20
5.7.3电压合格率实时曲线走势图：
（2D曲线图）24
5.7.4web综合图表的实现（ASP+VML的结合）：
27
第六章总结与展望35
6.1总结35
6.2展望35
参考文献36
附录37
致谢42
第一章前言
1.1研究的背景
随着Internet信息系统逐渐向Web的迁移和基于Web的电子商务系统的发展，Web设计和开发人员已经越来越将注意力集中到Web应用程序上，而非最初的Web内容创作和编辑排版。
Web应用程序更关注的是数据以及如何将数据抽取成信息、将信息转化成知识以为管理提供帮助。
管理者需要以更直观、更形象的可视化方式将数据抽取为信息，然后根据自己的理解将信息转化成知识。
Web图表是一种很好的将对象属性数据直观、形象地“可视化”的手段。
可视化（Visualization）技术使得人们能够在三维图形世界中直接对具有形体的信息进行操作，和计算机直接交流。
这种技术已经把人和机器的力量以一种直觉而自然的方式加以统一，这种革命性的变化无疑将极大地提高人们的工作效率。
可视化技术赋予人们一种仿真的、三维的并且具有实时交互的能力，这样人们可以在三维图形世界中用以前不可想象的手段来获取信息或发挥自己创造性的思维。
计算机图形学是计算机科学领域中的一个重要而又年轻的学科，它是随着计算机硬件特别是图形显示设备的发展而逐渐产生发展起来的。
随着计算机网络的不断发展，图形图像更多的在Web中使用，由于用图形图像表达各种信息，其容量大、直观方便，更符合人们观察了解事物运动规律的习惯，研究实现Web统计图表尤为适合人们的需要。
目前，计算机图形学在工业、商业、军事、教育和影视娱乐等各个领域得到了广泛应用，已成为计算机科学中发展最快、影响最大的学科之一，并在应用中日益显示出其重要性和不可替代性。
所以，图形图像的研究必将在许多科学领域内有其深远的影响和意义。
1.2研究的目的
本次研究是基于VML语言生成Web统计图表的研究与实现，深入研究实现Web统计图表技术，分析VML与其他技术比较所具备的优点，探讨Web图表的基本理论和设计原则，并给出具体的实现方法，使得用户和管理者对VML语言生成Web统计图表的广泛应用有比较深刻的认识。
作为一门专业的Web绘图编程语言----VML（TheVectorMarkupLanguage）矢量可标记语言是微软公司于1999年9月附带IE5.0发布的。
这是一门全新的图形编程语言，尽管目前业界关注的人士比较少但随着Web应用的不断发展，这种以文本形式存储图形的标记语言已呈现出它不可抵挡的优势和魅力。
它相当于IE里面的画笔，而且结合脚本，可以让图形产生动态的效果，同时也是未来3D网页制作的主要编程语言之一。
Web数据库应用系统中,有时需要有一些统计数据图形给用户传达准确、直观的数据信息。
利用HTML来添加图形的传统做法,由于受存储形式限制,其下载速度慢,且不能进行放大、缩小等功能。
单纯采用HTML不能很好地表示矢量图形,不能解决这方面的问题。
采用VML能够为这一问题提供合理的解决方案。
利用VML结合ASP访问数据库,动态生成客户端脚本,绘制出矢量图形。
结果表明采用这种方式能够充分发挥ASP的优势,并能表示出形象生动、可放大缩小而不影响图像质量的矢量图形。
最后结合一个实例,绘制了数据项统计比较走势图,具有较强的表现力。
充分表明采用VML绘制矢量图形具有极大的优势。
1.3研究的内容
1.3.1本次预期研究的重点是：
（1）研究实现WEB统计图表的技术，分析VML与其他技术比较所具备的优点。
（2）用VML实现柱形图，饼形图，曲线走势图等效果。
1.3.2研究的难点是：
做一个VML网页画图画板，能实现动态画图，例如可以画直线，矩形，圆形，椭圆，圆形，还可以编辑文字，插入图片等等；学生选课投票统计数据在web中显示，数据是以柱形图和饼形图实现；电压合格率实时曲线在web中显示某个时段的电压合格率；数据是以曲线走势图实现；最后设计一个web综合图表的实现，采用ASP+VML语言实现在网页中输入数据，实现3D柱形图，饼形图，曲线走势图年度统计等效果。
第二章可行性研究分析
2.1Web数据库应用系统
在Web数据库应用系统的开发过程中,需要给用户提供直观、美观的诸如柱型图、饼图、实时曲线图等的数据统计图,使用户能够方便地查看数据分布、变化的实时过程。
在常用的网络编程语言中,通常采用其内植的绘图API来实现统计图形的绘制。
但是其存在着明显的缺陷:
通常产生GIF或JPG等类型的图片,与Web其他部分不能很好地融合;图片下载速度较慢;非矢量图形不能随意放大或者缩小（比较容易失真）;重用性差。
矢量图具有不受设备分辨率影响、显示画面清晰、可对图像无限缩放而不会影响图像品质的优点。
传统的语言不能很好解决这方面的问题,而使用VML语言为该问题的解决提供了比较好的解决方案。
2.2Web信息系统的发展
随着Internet信息系统逐渐向Web的迁移和基于Web的电子商务系统的发展，Web设计和开发人员已经越来越将注意力集中到Web应用程序上，而非最初的Web内容创作和编辑排版。
Web应用程序更关注的是数据以及如何将数据抽取成信息、将信息转化成知识以为管理提供帮助。
管理者需要以更直观、更形象的可视化方式将数据抽取为信息，然后根据自己的理解将信息转化成知识。
Web图表是一种很好的将对象属性数据直观、形象地“可视化”的手段。
2.3Web图表开发应用语言的定义
1.GML（Geography Markup Language）：
是基于XML的空间信息编码标准，由OpenGIS Consortium （OGC）提出，得到了许多公司的大力支持，如Oracle、Galdos、MapInfo、CubeWerx等。
2.SVG（Scalable Vector Graphics）：
SVG图像是与XML1.0兼容的文档，SVG元素是指示如何绘制图像的一些指令，阅读器（Viewer）解释这些指令，把SVG图像在指定设备上显示出来。
3.VML（Vector Markup Language）：
现在系统IE5.0以上版本对VML提供支持，它编写简单、浏览器可以解析、与HTML等语言完全兼容，它更具有实际WEB页应用的可行性、深层开发的可行性。
2.4基于GML、SVG、VML这三种语言的比较
Web图表的设计和开发主要是基于GML、SVG、VML这三种语言，且都是基于XML的可用来描述矢量图形的标记语言，但它们都有各自不同的用途和特点：
1.GML（Geography Markup Language）：
是基于XML的空间信息编码标准，由OpenGIS Consortium （OGC）提出，得到了许多公司的大力支持，如Oracle、Galdos、MapInfo、CubeWerx等。
运用GML，封装的地理数据和图形解释是清楚分离的。
2.SVG（Scalable Vector Graphics）：
SVG图像是与XML1.0兼容的文档，SVG元素是指示如何绘制图像的一些指令，阅读器（Viewer）解释这些指令，把SVG图像在指定设备上显示出来。
使用SVG可以在网页上显示出各种各样的高质量的矢量图形，支持很多您想象得出的功能：
几何图形、动画、渐变色、滤镜效果等。
最关键的是，它也是完全用普通文本来描述的！
也就是说，这是一种专门为网络而设计的基于文本的图像格式。
3.VML（Vector Markup Language）：
现在也只有IE5.0以上版本对VML提供支持。
使用VML可以在IE中绘制矢量图形，所以有人认为VML就是在IE中实现了画笔的功能。
VML具有先天的优势，它的表示方法简单，易于扩展，支持高质量的矢量图形显示，VML我感觉相当健全（图型质量、输出速度），它编写简单、浏览器可以解析、与HTML等语言完全兼容，它更具有实际WEB页应用的可行性、深层开发的可行性。
4.GML、SVG、VML这三种语言都与矢量图形有着密切的关系：
GML在表示实体的空间信息的同时加入了实体的其他属性信息，是表示实体的空间信息和属性的编码标准，但它并不支持直接显示图形。
而VML和SVG是在表示图形的矢量信息同时加入了图形的显示信息（即以什么样的样式显示矢量图形），是显示矢量图形的两种比较好的格式。
相比之下，SVG是综合了VML的优点后推出的，是国际标准，它比VML具有更多的优点，也有更广阔的前景。
但由于VML有IE的支持，而SVG要想在浏览器中显示就需要安装插件，在这一点上，VML略优于SVG，这也是我选择用采用VML语言实现WEB统计图表的原因吧！
第三章目前的主要技术
本次课题WEB统计图表的研究，我主要采用VML语言实现，还会使用到ASP动态网页、Dreamweaver2004开发工具和Access2000数据库。
ASP是微软公司开发的代替CGI脚本程序的一种应用,它可以与数据库和其它程序进行交互，是一种简单、方便的编程工具，Dreamweaver2004开发Web功能强大,支持Web应用与开发，Access2000数据库是最常用的数据库了，且与VML语言兼容较高，具有实际应用的可行性和深层开发的可行性。
3.1HTML与ASP的结合
3.1.1HTML语言
HTML（HypertextMarkupLanguage,超文本标记语言）,是一种用来制作超文本文档的简单标记语言。
用HTML编写的超文本文档能独立于各种操作系统平台（如UNIX,WINDOWS等）。
使用HTML语言描述的文件,需要通过WWW浏览器显示出效果。
通过HTML可以表现出图片调用、文字显示等丰富多彩的设计风格,可以实现不同页面之间的跳转和展现丰富多彩的多媒体效果等功能。
在Microsoft的产品中,网页与数据库结合的解决方案是ASP。
尤其在电子商务网站的建设方面,几乎都是用ASP编写程序。
ActiveServerPages（ASP）是服务器端脚本编写环境,使用它可以创建和运行动态、交互的Web服务器应用程序。
使用ASP可以组合HTML页、VBScript脚本命令和JavaScript脚本命令等,以创建交互的Web页和基于Web的功能强大的应用程序。
ASP可以使用ADO（ActiveDataObject,主动数据对象）进行Access和SQLServer数据库的连接访问,取出数据库中的数据进行各种操作,同时也能读取其他ODBC兼容的数据库。
由于ASP是经过服务器解析之后再向浏览器返回数据,所有嵌入在HTML中的程序都在服务器端执行,所以有了ASP就不必担心客户的浏览器是否能运行编写的代码。
当程序执行完毕后,服务器仅将执行的结果返回给客户浏览器,这样就减轻了客户端浏览器的负担,大大提高了交互的速度。
但是这样导致一个问题,运行ASP页面比普通的HTML页面要慢。
因为普通的HTML页面只需要浏览器就能够解析,而ASP则必须是服务器将整页的代码都执行一遍之后再发送数据。
这样增加了服务器的负担,降低了客户端的效率。
为弥补这一缺点,通过ASP连接访问数据库,并对数据进行操作;在客户端采用VML方式对获得的数据进行动态矢量绘图。
3.1.2HTML语言的局限性
HTML以简单精炼的语法,极易掌握的通用性与易学性,使Web网页得到了极快的推广。
HTML过份限制了Web文件的复杂性与灵活性,使人们面对复杂多变的具体应用束手无策。
人们开始全力重新构造Web图表,诞生了许多新的技术。
VML语言就是其中最引人注目的一项技术。
3.2VML语言
3.2.1VML简介
VML（VectorMarkupLanguage）是微软1999年9月附带IE5.0发布的。
它以最简洁的标记代码，在WEB页快速绘制输出矢量图型（线段、圆形、矩形、圆矩形、矢量图像、曲线、多边形、弧型）、并修饰这些图形的（边框、阴影、填充、背景、渐变、箭头、3D）等等外观效果。
能井然有序跟HTML超文本紧密结合，或搀杂在HTML标签内，或把HTML标签囊括其中充当内容。
几乎支持CSS2样式表所有的样式属性（宽度、高度、3D-XYZ位置、鼠标形状、裁剪、排版缩进、缩放等等）。
VML所绘制的每一个图形，都跟HTML一样是一个图形对象，同样支持DHTML对象编程模型、DHTML事件编程模型。
轻松的读取、更改VML图形对象的各种属性，响应用户触发的鼠标、键盘等事件，实现与用户交互。
如果有机的配合setTimeout、setInterval两个定时器方法，则能实现类似Flash一样复杂的动画，输出质量相当的好。
只要DHTML、JS编程功底足够深，任何复杂的动画都可以实现。
3.2.2VML语言的好处
使用VML可以在IE中绘制矢量图形,能将图形信息与文本信息及其他数据集成在一起,是一种用文本方式描述矢量图形的语言。
VML在Web上建立的高效、灵活和简洁的矢量图形可以任意放大缩小而不损失图形的质量,在制作地图上有很大用途。
结合一种网络编程语言就能设计出动态的统计图形。
并能够结合客户端脚本,让图形产生动态的效果。
在数据交互的过程中,服务器只须将变化的数据发送到客户端即可。
不仅易于对绘制的图形进行控制,而且充分利用了客户端的资源,减轻了服务器的负荷。
其基本规则是:
单个的元素被定义为形状,大多数形状是由矢量路径描述的,它提供了一些预定义的形状如直线、曲线等。
VML形状可以单独产生,也可多个形状相关。
因为各个形状本身都包含了自身的特征比率信息,所以整个组可以扩展而不会影响到其中包含的内容。
3.2.3VML语言的特点
XML是公认的拥有无穷生命力的下一代网络标记语言,XML和HTML一起使用,极大地扩展了Web页面的能力,VML作为XML的一个子集,具有先天的优势,它的表示方法简单,易于扩展。
支持高质量的矢量图形显示,它们基于由相连接的直线和曲线描述路径。
在VML语言中使用两个基本的元素:
Shape和Group,这两个元素定义了VML语言的全部结构。
Shape描述一个矢量图形元素,而Group用来将这些图形结合起来,这样它们可以作为一个整体进行处理。
VML语言规范包括大量的支持多种不同矢量图形特征的元素。
其预定义的主要图形元素有：
Shape,Path,Line,Polyline,Curve,Rect,Roundrect,Oval,Arc,Group。
同时由于VML语言使用简单的文本来表示图像,这样就可用很少的字节来表示比较复杂的图像。
VML与HTML的兼容,通过在HTML中声明VML命名空间并声明处理函数,就可以和其他HTML元素一样使用VML元素,在客户端浏览器显示图像。
VML标记里面可以定义DHTML大部分属性和事件,比如id,name,title,onmouseover等等。
3.2.4VML语言的应用
VML语言究竟能在WEB页中做些什么呢！
下面作简单的应用介绍吧：
1.圆角表格、表格斜线、圆形、曲线等等，是做为HTML语言的补足；
2.数据图表（饼图、柱状图、曲线图）、图像处理（VML可将图像矢量化，能进行亮度、对比度、色彩度、漫画风格、图像造型、颜色融合的处理）、图像绘制;
3.制作3D网页、VML动画特技、VMLFlash动画、VML游戏。
VML语言应用功能强大，无不让程序开发者们怦然心动啊！
第四章VML的基本用法
4.1VML基本语法
在VML语言里面,标记使用的是XML语言的扩张,namespace（命名空间）,可以使用惯用的“v间,并且把它和系统预定义的行为VML用IE5.0到IE6.0版本通用的定义如下:
v=“urn:
schemas-microsoft-com:
vml”>
其中xmlns是指XMLnamespaceBehavior（行为）是IE5.0新推出的,它把命名空间“v统预定义的行为VML连接。
这样定义以后,V的应用中使用如下标记:
shape>
shape>
这个标记必须是成对出现。
和普通的HTML别,每个标记都增加了一个命名空间。
VML有自己的坐标系,使用CoordSize定义坐标,这样动态改变它的坐标,就可以实现随意放大、缩小、旋转等功能。
Shape对象是VML最基本的对象,是Path,利用它可以画出所有想要的图形。
Shape生出来的一些对象,比如说Rect（矩形）,RoundRect（矩形）,Oval（圆）,Line（线）,PolyLine（不规则折线（图形文件）等等。
Group容器能让一系列的VML元素对象,如果使用了超过一个VML对象的页面都使用容器,同时可以通过动态改变它的CoordSize的大小和整个Group里面的VML元素对象。
初始化和数据读取的过程。
主页面中带有脚本,如增加VML元素的功能。
子页面是个ASP程序,从库中读取出数据,生成相应的脚本：
functiondrawGraph（x,y,value）
{
……
}
然后就是在Body用一个Iframe做后台,用来读取数据库中的数据;为命名空进行连接。
使也就是命名空间。
”和系就可以在后标记有所区属性就是用来它最主要的属性对象派圆角）,Image对象使用共同的坐标Group值放大或缩下面就是定义绘制图形的脚本函数以及进行页面初可以实现诸从数据中初始化脚本和读取数据。
可以使前台用脚本生成：
shapestyle=“position:
relative;width:
100;height:
50px”>
shape>
groupID=“group1”style=“WIDTH:
200px;HEIGHT:
200px;”coordsize=“200,200”>
group>
none”>
由于可能会产生后台已完成读数据操作,而前台还没有初始化的情况,因此把脚本放在Body的前面,Iframe放在Body的最后面。
相应的在readData.asp里面: