基于vml生成web统计图表的研究与实现论文

1、.PAGE ：.；梧 州 学 院毕 业 论 文 论文标题 基于VML生成WEB统计图表 的研讨与实现 系 别 计算机与电子信息工程系 专 业 计算机科学与技术 班 级 学 号 学生姓名 指点教师签名 完成时间 年 月摘要 计算机图形学是计算机科学最活泼的分支之一，它伴随着计算机科学技术的开展而开展。如今，计算机图形学曾经深深的扎根于现代社会的各个方面，被广泛运用于计算机动画、科学计算可视化、CAD/CAM、影视文娱等领域。VML是一门全新的图形编程言语, 相当于IE里面的画笔，而且结合脚本，可以让图形产生动态的效果，同时也是未来D网页制造的主要编程言语之一。本文经过基于VML生成WEB统计图表

2、的研讨与实现，着重论述了如何利用VML言语实如今线绘制几何矢量图形并实现图形算法。本文首先对Web图表开发主要的GML、SVG、VML这三种言语进展比较,然后运用IE .提供的VML解析器,阐明VML的根本语法,讨论运用VML等技术实现Web图形系统的能够性,同时给出了一些原型实例。关键词: 矢量图形 VML 动态脚本 The research and achievement about the VML language to create spatial web chartAbstractWith the development of computer technology, compute

3、r 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 progra

4、m language like a paint or on IE and only can be carried out by IE. as well as up of . 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 provide

5、d by IE ., 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目录 TOC o - h z u HYPERLINK l _Toc 第一章 前言 PAGEREF _Toc h HYPERLINK l _Toc .

6、 研讨的背景 PAGEREF _Toc h HYPERLINK l _Toc . 研讨的目的 PAGEREF _Toc h HYPERLINK l _Toc . 研讨的内容 PAGEREF _Toc h HYPERLINK l _Toc 第二章 可行性研讨分析 PAGEREF _Toc h HYPERLINK l _Toc . Web数据库运用系统 PAGEREF _Toc h HYPERLINK l _Toc . Web信息系统的开展 PAGEREF _Toc h HYPERLINK l _Toc . Web图表开发运用言语的定义 PAGEREF _Toc h HYPERLINK l _To

7、c . 基于GML、SVG、VML这三种言语的比较 PAGEREF _Toc h HYPERLINK l _Toc 第三章 目前的主要技术 PAGEREF _Toc h HYPERLINK l _Toc . HTML与ASP的结合 PAGEREF _Toc h HYPERLINK l _Toc . VML言语 PAGEREF _Toc h HYPERLINK l _Toc 第四章VML的根本用法 PAGEREF _Toc h HYPERLINK l _Toc . VML根本语法 PAGEREF _Toc h HYPERLINK l _Toc . VML的常用标志 PAGEREF _Toc h

8、HYPERLINK l _Toc . 图形与图像算法在VML中的实现 PAGEREF _Toc h HYPERLINK l _Toc . ASP结合VML动态开发原理 PAGEREF _Toc h HYPERLINK l _Toc 第五章 程序实现 PAGEREF _Toc h HYPERLINK l _Toc .义务概述 PAGEREF _Toc h HYPERLINK l _Toc .用户的特点 PAGEREF _Toc h HYPERLINK l _Toc .需求规定 PAGEREF _Toc h HYPERLINK l _Toc . Web统计图表的实现： PAGEREF _Toc h

9、 HYPERLINK l _Toc . Web统计图表的开发与设计： PAGEREF _Toc h HYPERLINK l _Toc . 运转环境规定 PAGEREF _Toc h HYPERLINK l _Toc . 实现程序实例： PAGEREF _Toc h HYPERLINK l _Toc . VML网页画图画板： PAGEREF _Toc h HYPERLINK l _Toc .学生选课投票统计：D饼型图转换为D柱型图 PAGEREF _Toc h HYPERLINK l _Toc .电压合格率实时曲线走势图：D曲线图 PAGEREF _Toc h HYPERLINK l _Toc

10、. web综合图表的实现ASP+VML的结合： PAGEREF _Toc h HYPERLINK l _Toc 第六章 总结与展望 PAGEREF _Toc h HYPERLINK l _Toc . 总结 PAGEREF _Toc h HYPERLINK l _Toc . 展望 PAGEREF _Toc h HYPERLINK l _Toc 参考文献 PAGEREF _Toc h HYPERLINK l _Toc 附录 PAGEREF _Toc h HYPERLINK l _Toc 致谢 PAGEREF _Toc h 第一章 前言. 研讨的背景随着Internet信息系统逐渐向Web的迁移和基

11、于Web的电子商务系统的开展，Web设计和开发人员曾经越来越将留意力集中到Web运用程序上，而非最初的Web内容创作和编辑排版。Web运用程序更关注的是数据以及如何将数据抽取成信息、将信息转化成知识以为管理提供协助 。管理者需求以更直观、更笼统的可视化方式将数据抽取为信息，然后根据本人的了解将信息转化成知识。Web图表是一种很好的将对象属性数据直观、笼统地“可视化的手段。可视化Visualization技术使得人们可以在三维图形世界中直接对具有形体的信息进展操作，和计算机直接交流。这种技术曾经把人和机器的力量以一种直觉而自然的方式加以一致，这种革命性的变化无疑将极大地提高人们的任务效率。可视化

12、技术赋予人们一种仿真的、三维的并且具有实时交互的才干，这样人们可以在三维图形世界中用以前不可想象的手段来获取信息或发扬本人发明性的思想。计算机图形学是计算机科学领域中的一个重要而又年轻的学科，它是随着计算机硬件特别是图形显示设备的开展而逐渐产生开展起来的。随着计算机网络的不断开展，图形图像更多的在Web中运用，由于用图形图像表达各种信息，其容量大、直观方便，更符合人们察看了解事物运动规律的习惯，研讨实现Web统计图表尤为适宜人们的需求。目前，计算机图形学在工业、商业、军事、教育和影视文娱等各个领域得到了广泛运用，已成为计算机科学中开展最快、影响最大的学科之一，并在运用中日益显示出其重要性和不可

13、替代性。所以，图形图像的研讨必将在许多科学领域内有其深远的影响和意义。. 研讨的目的本次研讨是基于VML言语生成Web统计图表的研讨与实现，深化研讨实现Web统计图表技术，分析VML与其他技术比较所具备的优点，讨论Web图表的根本实际和设计原那么，并给出详细的实现方法，使得用户和管理者对VML言语生成Web统计图表的广泛运用有比较深化的认识。作为一门专业的Web绘图编程言语VML(The Vector Markup Language)矢量可标志言语是微软公司于年月附带IE.发布的。这是一门全新的图形编程言语，虽然目前业界关注的人士比较少但随着Web运用的不断开展，这种以文本方式存储图形的标志言

14、语已呈现出它不可抵挡的优势和魅力。它相当于IE里面的画笔，而且结合脚本，可以让图形产生动态的效果，同时也是未来D网页制造的主要编程言语之一。Web 数据库运用系统中 ,有时需求有一些统计数据图形给用户传达准确 、直观的数据信息 。利用 HTML 来添加图形的传统做法 ,由于受存储方式限制 ,其下载速度慢 ,且不能进展放大 、减少等功能 。单纯采用 HTML 不能很好地表示矢量图形 ,不能处理这方面的问题 。采用 VML 可以为这一问题提供合理的处理方案 。利用 VML 结合 ASP 访问数据库 ,动态生成客户端脚本 ,绘制出矢量图形 。结果阐明采用这种方式可以充分发扬 ASP 的优势 ,并能表

15、示出笼统生动 、可放大减少而不影响图像质量的矢量图形 。最后结合一个实例 ,绘制了数据项统计比较走势图 ,具有较强的表现力 。充分阐明采用VML 绘制矢量图形具有极大的优势 。. 研讨的内容.本次预期研讨的重点是：()研讨实现WEB统计图表的技术，分析VML与其他技术比较所具备的优点。()用VML实现柱形图，饼形图，曲线走势图等效果。.研讨的难点是：做一个VML网页画图画板，能实现动态画图，例如可以画直线，矩形，圆形，椭圆，圆形，还可以编辑文字，插入图片等等；学生选课投票统计数据在web中显示，数据是以柱形图和饼形图实现；电压合格率实时曲线在web中显示某个时段的电压合格率；数据是以曲线走势图

16、实现；最后设计一个web综合图表的实现，采用ASP+VML言语实如今网页中输入数据，实现D柱形图，饼形图，曲线走势图年度统计等效果。第二章 可行性研讨分析. Web数据库运用系统在Web数据库运用系统的开发过程中,需求给用户提供直观 、美观的诸如柱型图、饼图、实时曲线图等的数据统计图,运用户可以方便地查看数据分布、变化的实时过程。在常用的网络编程言语中,通常采用其内植的绘图 API来实现统计图形的绘制。但是其存在着明显的缺陷:通常产生 GIF 或 JPG 等类型的图片 ,与 Web 其他部分不能很好地交融 ;图片下载速度较慢 ;非矢量图形不能随意放大或者减少比较容易失真;重用性差。矢量图具有不

17、受设备分辨率影响、显示画面明晰、可对图像无限缩放而不会影响图像质量的优点 。传统的言语不能很益处理这方面的问题 ,而运用 VML言语为该问题的处理提供了比较好的处理方案 。. Web信息系统的开展随着Internet信息系统逐渐向Web的迁移和基于Web的电子商务系统的开展，Web设计和开发人员曾经越来越将留意力集中到Web运用程序上，而非最初的Web内容创作和编辑排版。Web运用程序更关注的是数据以及如何将数据抽取成信息、将信息转化成知识以为管理提供协助 。管理者需求以更直观、更笼统的可视化方式将数据抽取为信息，然后根据本人的了解将信息转化成知识。Web图表是一种很好的将对象属性数据直观、笼

18、统地“可视化的手段。. Web图表开发运用言语的定义. GML(GeographyMarkupLanguage)：是基于XML的空间信息编码规范，由OpenGISConsortium(OGC)提出，得到了许多公司的大力支持，如Oracle、Galdos、MapInfo、CubeWerx等。. SVG(ScalableVectorGraphics)：SVG图像是与XML.兼容的文档，SVG元素是指示如何绘制图像的一些指令，阅读器(Viewer)解释这些指令，把SVG图像在指定设备上显示出来。. VML(VectorMarkupLanguage)：如今系统IE.以上版本对VML提供支持，它编写简单

19、、阅读器可以解析、与HTML等言语完全兼容，它更具有实践WEB页运用的可行性、深层开发的可行性。. 基于GML、SVG、VML这三种言语的比较Web图表的设计和开发主要是基于GML、SVG、VML这三种言语，且都是基于XML的可用来描画矢量图形的标志言语，但它们都有各自不同的用途和特点：. GML(GeographyMarkupLanguage)：是基于XML的空间信息编码规范，由OpenGISConsortium(OGC)提出，得到了许多公司的大力支持，如Oracle、Galdos、MapInfo、CubeWerx等。运用GML，封装的地理数据和图形解释是清楚分别的。. SVG(Scalab

20、leVectorGraphics)：SVG图像是与XML.兼容的文档，SVG元素是指示如何绘制图像的一些指令，阅读器(Viewer)解释这些指令，把SVG图像在指定设备上显示出来。运用SVG可以在网页上显示出各种各样的高质量的矢量图形，支持很多您想象得出的功能：几何图形、动画、渐变色、滤镜效果等。最关键的是，它也是完全用普通文本来描画的！也就是说，这是一种专门为网络而设计的基于文本的图像格式。. VML(VectorMarkupLanguage)：如今也只需IE.以上版本对VML提供支持。运用VML可以在IE中绘制矢量图形，所以有人以为VML就是在IE中实现了画笔的功能。VML具有先天的优势，

21、它的表示方法简单，易于扩展，支持高质量的矢量图形显示，VML我觉得相当健全(图型质量、输出速度)，它编写简单、阅读器可以解析、与HTML等言语完全兼容，它更具有实践WEB页运用的可行性、深层开发的可行性。. GML、SVG、VML这三种言语都与矢量图形有着亲密的关系：GML在表示实体的空间信息的同时参与了实体的其他属性信息，是表示实体的空间信息和属性的编码规范，但它并不支持直接显示图形。而VML和SVG是在表示图形的矢量信息同时参与了图形的显示信息即以什么样的款式显示矢量图形，是显示矢量图形的两种比较好的格式。相比之下，SVG是综合了VML的优点后推出的，是国际规范，它比VML具有更多的优点，

22、也有更宽广的前景。但由于VML有IE的支持，而SVG要想在阅读器中显示就需求安装插件，在这一点上，VML略优于SVG，这也是我选择用采用VML言语实现WEB统计图表的缘由吧！第三章 目前的主要技术本次课题WEB统计图表的研讨，我主要采用VML言语实现，还会运用到ASP动态网页、Dreamweaver开发工具和Access数据库。ASP是微软公司开发的替代CGI脚本程序的一种运用,它可以与数据库和其它程序进展交互，是一种简单、方便的编程工具，Dreamweaver开发Web功能强大,支持Web运用与开发，Access数据库是最常用的数据库了，且与VML言语兼容较高，具有实践运用的可行性和深层开发

23、的可行性。. HTML与ASP的结合. HTML言语HTML ( Hypertext Markup Language , 超文本标志言语) ,是一种用来制造超文本文档的简单标志言语 。用HTML 编写的超文本文档能独立于各种操作系统平台(如 UNIX ,WINDOWS 等) 。运用 HTML 言语描画的文件 ,需求经过 WWW 阅读器显示出效果 。经过 HTML 可以表现出图片调用 、文字显示等丰富多彩的设计风格 ,可以实现不同页面之间的跳转和展现丰富多彩的多媒体效果等功能 。在 Microsoft 的产品中 ,网页与数据库结合的处理方案是 ASP。尤其在电子商务网站的建立方面 ,几乎都是用A

24、SP 编写程序 。Active Server Pages (ASP) 是效力器端脚本编写环境 ,运用它可以创建和运转动态 、交互的 Web 效力器运用程序 。运用 ASP 可以组合 HTML 页 、VBScript 脚本命令和JavaScript 脚本命令等 ,以创建交互的 Web 页和基于 Web的功能强大的运用程序。ASP可以运用 ADO ( Active Data Object ,自动数据对象) 进展 Access 和 SQL Server 数据库的衔接访问 ,取出数据库中的数据进展各种操作 ,同时也能读取其他 ODBC 兼容的数据库 。由于ASP是经过效力器解析之后再向阅读器前往数据

25、, 一切嵌入在HTML 中的程序都在效力器端执行 ,所以有了 ASP 就不用担忧客户的阅读器能否能运转编写的代码 。当程序执行终了后 ,效力器仅将执行的结果前往给客户阅读器 ,这样就减轻了客户端阅读器的负担 ,大大提高了交互的速度 。但是这样导致一个问题 , 运转 ASP 页面比普通的HTML 页面要慢 。由于普通的 HTML 页面只需求阅读器就可以解析 ,而 ASP 那么必需是效力器将整页的代码都执行一遍之后再发送数据 。这样添加了效力器的负担 ,降低了客户端的效率。为弥补这一缺陷 ,经过 ASP 衔接访问数据库 ,并对数据进展操作;在客户端采用 VML方式对获得的数据进展动态矢量绘图 。.

26、 HTML言语的局限性HTML以简单精炼的语法,极易掌握的通用性与易学性,使Web网页得到了极快的推行。HTML过份限制了Web文件的复杂性与灵敏性,使人们面对复杂多变的详细运用束手无策。人们开场全力重新构造Web图表,诞生了许多新的技术。VM L言语就是其中最引人注目的一项技术。. VML言语. VML简介VMLVector Markup Language是微软年月附带IE.发布的。它以最简约的标志代码，在WEB页快速绘制输出矢量图型线段、圆形、矩形、圆矩形、矢量图像、曲线、多边形、弧型、并修饰这些图形的边框、阴影、填充、背景、渐变、箭头、D等等外观效果。能井然有序跟HTML超文本严密结合，

27、或搀和在HTML标签内，或把HTML标签囊括其中充任内容。几乎支持CSS款式表一切的款式属性宽度、高度、D-XYZ位置、鼠标外形、裁剪、排版缩进、缩放等等。VML所绘制的每一个图形，都跟HTML一样是一个图形对象，同样支持DHTML对象编程模型、DHTML事件编程模型。轻松的读取、更改VML图形对象的各种属性，响运用户触发的鼠标、键盘等事件，实现与用户交互。假设有机的配合setTimeout、setInterval两个定时器方法，那么能实现类似Flash一样复杂的动画，输出质量相当的好。只需DHTML、JS编程功底足够深，任何复杂的动画都可以实现。. VML言语的益处运用 VML可以在 IE

28、中绘制矢量图形 ,能将图形信息与文本信息及其他数据集成在一同 ,是一种用文本方式描画矢量图形的言语 。VML 在 Web 上建立的高效 、灵敏和简约的矢量图形可以恣意放大减少而不损失图形的质量 ,在制造地图上有很大用途 。结合一种网络编程言语就能设计出动态的统计图形 。并可以结合客户端脚本 , 让图形产生动态的效果 。在数据交互的过程中 ,效力器只须将变化的数据发送到客户端即可 。不仅易于对绘制的图形进展控制 ,而且充分利用了客户端的资源 ,减轻了效力器的负荷 。其根本规那么是 :单个的元素被定义为外形 , 大多数外形是由矢量途径描画的 ,它提供了一些预定义的外形如直线 、曲线等 。VML外形

29、可以单独产生 ,也可多个外形相关 。由于各个外形本身都包含了本身的特征比率信息 ,所以整个组可以扩展而不会影响到其中包含的内容 。. VML言语的特点XML是公认的拥有无穷生命力的下一代网络标志言语 ,XML 和 HTML 一同运用 ,极大地扩展了 Web 页面的才干, VML作为XML的一个子集 , 具有先天的优势 ,它的表示方法简单 ,易于扩展 。支持高质量的矢量图形显示 ,它们基于由相衔接的直线和曲线描画途径。在VML言语中运用两个根本的元素 : Shape 和Group ,这两个元素定义了 VML 言语的全部构造 。Shape 描画一个矢量图形元素 ,而 Group 用来将这些图形结合

30、起来 ,这样它们可以作为一个整体进展处置 。VML言语规范包括大量的支持多种不同矢量图形特征的元素 。其预定义的主要图形元素有：Shape , Path , Line , Polyline , Curve , Rect , Roundrect , Oval ,Arc , Group 。同时由于 VML言语运用简单的文本来表示图像 ,这样就可用很少的字节 来表示比较复杂的图像。VML与HTML 的兼容 , 经过在 HTML 中声明 VML命名空间并声明处置函数 ,就可以和其他 HTML元素一样运用 VML元素 ,在客户端阅读器显示图像。VML标志里面可以定义DHTML大部分属性和事件,比如id,

31、 name , title ,on mouseover等等。. VML言语的运用VML言语终究能在WEB页中做些什么呢！下面作简单的运用引见吧：. 圆角表格、表格斜线、圆形、曲线等等，是做为HTML言语的补足；. 数据图表(饼图、柱状图、曲线图)、图像处置(VML可将图像矢量化，能进展亮度、对比度、颜色度、漫画风格、图像外型、颜色交融的处置)、图像绘制;. 制造D网页、VML动画特技、VMLFlash动画、VML游戏。VML言语运用功能强大，无不让程序开发者们怦然心动啊！第四章VML的根本用法. VML根本语法在VML言语里面,标志运用的是XML言语的扩张,namespace (命名空间) ,

32、可以运用惯用的“v间,并且把它和系统预定义的行为VML用IE.到IE.版本通用的定义如下:v : Behavior : url ( # default # VML ) 其中xmlns是指XML namespaceBehavior (行为)是IE.新推出的,它把命名空间“v统预定义的行为VML衔接 。这样定义以后,V的运用中运用如下标志: 这个标志必需是成对出现 。和普通的HTML别,每个标志都添加了一个命名空间。VML有本人的坐标系,运用CoordSize定义坐标,这样动态改动它的坐标,就可以实现随意放大 、减少 、旋转等功能 。Shape对象是VML最根本的对象,是Path ,利用它可以画出

33、一切想要的图形 。Shape生出来的一些对象,比如说Rect (矩形) , RoundRect (矩形) ,Oval (圆) ,Line (线) , PolyLine (不规那么折线(图形文件)等等 。Group容器能让一系列的VML元素对象,假设运用了超越一个VML对象的页面都运用容器,同时可以经过动态改动它的CoordSize的大小和整个Group里面的VML元素对象。初始化和数据读取的过程 。主页面中带有脚本,如添加VML元素的功能。子页面是个ASP程序,从库中读取出数据,生成相应的脚本：function draw Graph ( x ,y ,value)然后就是在Body用一个Ifra

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

35、功能 。. VML的常用标志VML是经过XML标志来描画矢量图形的，所以必需遵照一定规那么，和HTML标志的通用属性如:id、name、class、title、style等一样，VML标志也有本人的通用属性、支持HTML的通用属性、支持CSS的款式定义。经过这些属性，他们可以修饰VML图形如线、圆形的外形、大小、颜色、内容、边框，以及定义鼠标款式、编程用的ID索引、提示标题等等。标志特有的通用属性非HTML、CSS一切VM标志属性表属性名默许值值类型/范围用途strokeweight .pt=px number描画图形的边框粗度strokecolor black color描画图形的边框颜色s

36、troked true boolean描画图形能否运用边框fillcolor white color描画图形的背景颜色filled true boolean描画图形能否运用背景print true boolean描画图形能否允许被打印机打印coordsize , VectorD暗示图形与容器空间的大小比例coordorigin VectorDcoordinate at top-left cornerof elementwrapcoords null stringoutline to use for tight textwrapping VML标志属性表属性名可用值/可用值范围用途width -

37、描画宽度height -描画高度position static absolute fixed relative描画如何定位输出left -描画间隔 页面位置左top -描画间隔 页面位置上z-index -描画D位置cursor auto crosshair hand move help wait text描画鼠标外形zoom -描画缩放比例clip rect(上右下左)描画裁剪对象border - style color描画边框display block none inline list-item描画显示或隐藏overflow visible auto hidden scroll描画滚动条c

38、olor colorstring描画文本内容颜色font-size -描画文本内容字号filter xray flipv fliph invert alpha(opacity=num)描画滤镜效果rotation(-)%描画旋转度flip x y描画反转或颠倒图形. 图形与图像算法在VML中的实现自年微软公司发布VML.版以后，VML言语不但对作图功能有了强大的改良而且对图形图像的处置也有了较强的提高。目前VML曾经成为最强的网页编辑工具之一，可以完成根本的三维网页的设计，做图及图形处置，并且支持高质量的图像显示。正由于VML基于XML规范而XML是公认拥有无穷生命力的下一代网络标志言语，所以

39、VML具有先天的优势，它的表示方法简单，易于扩展等等。相比之下，GMLGeography MarkupLanguage、SVGScalable Vector Graphics、VML都与矢量图形有着亲密的关系。GML在表示实体的空间信息的同时参与了实体的其他属性信息，是表示实体的空间信息和属性的编码规范，但它并不支持直接显示图形。而VML和SVG是在表示图形的矢量信息同时参与了图形的显示信息即以什么样的款式显示矢量图形，是显示矢量图形的两种比较好的格式。相比之下，SVG是综合了VML的优点后推出的，是国际规范，它比VML具有更多的优点，也有更宽广的前景。但由于VML有IE的支持，而且有人以为V

40、ML就是IE中的画笔，而SVG要想在阅读器中显示就需求安装插件，在这一点上，VML远远优于SVG。二者都支持很多您想象得出的功能：绘制几何图形、动画、渐变色、滤镜效果等。在VML中运用两个根本的元素：shape和group。这两个元素定义了VML的全部构造；shape描画一个矢量图形元素，而group用来将这些图形结合起来，这样它们可以作为一个整体进展处置。以下是本文所涉及VML的图形元素有：Shape、Path、Line、Polyline、Curve、Rect、Roundrect、Oval、Arc、Group等。由于内容太多太杂，只解释部分概念如下：line线标志、XYZ坐标与单位概念：li

41、ne标志可以在网页中从个X，Y交接点到另个X，Y交接点之间，创建一条直线。oval圆与rect矩型：VML的oval和rect分别可以绘制圆形与矩形。RoundRect圆矩型arc圆弧image图片的插入与图像处置polyline多边型shape多边型与polyline多边型的优劣比较shapetype模版shape曲线background背景group集合容器：该标志不是用来输出某种图形的、运转时其本身也不可见，而且也没有公用属性，只需VML通用属性，但却也是非常重要的、特殊的VML标志。它的作用就是充任“类似父或母的身份将多个“类似儿女成员的图形囊括其中，然后他可以单独性的描画“父母，不用

42、一个一个去控制“单个子女，从而实现了“全员子女承继“父母的遗传。Id,class,style(top,left,width,height,rotation,z-index,position,visibility,display),title,href,target,alt,coordsize,coordorigin等等属性。而在在实践运用中，最重要的是让“子女承继CSS-style()括号里的属性。vmlframe图形援用shadow阴影fill填充extrusion立体D级标志：上面所说到的VML通用属性，是针对像oval、rect、roundrect这样的一级标志而言的。而对于大多数的二级

43、标志，是不支持的，只需一个例外，像Textbox内容，即能当作一级标志又能当作二级标志。不过id这个通用属性，是一切的一、二级标志均支持的属性。textbox内容imagedata背景图片textpath文本途径VML规范包括大量的支持多种不同矢量图形特征的元素。由文本构成的图像，并可集成到HTML。由于VML运用简单的文本来表示图像，这样就可用很少的字节来表示比较复杂的图像。VML与HTML兼容，经过在HTML中声明VML命名空间并声明处置函数，就可以和其他HTML元素一样运用VML元素，在客户端阅读器显示图像。VML标志里面可以定义DHTML大部分属性和事件，比如说id,name,titl

44、e,onmouseover等等。支持交互与动画。但VML的功能不只是绘图，他还可以在图形中嵌入文本，并可实现超链，还可经过脚本言语实现一定的动画功能。. ASP结合VML动态开发原理ASP 运用 ADO 存取数据库 。而 ADO 的实践数据存取操作是经过 OLEDB 或 ODBC 驱动程序进展的 。运用ADO 可以在 ASP 中编写可以直接操作执行的 SQL 语句来操作数据库 。其根本义务就是和数据库建立衔接 、向数据库发送 SQL 语句 、处置数据库前往的结果 。图 为 ASP 与 VML 结合的原理图 。数据层存放大量数据资源 。中间层为 Web 效力器端 ASP 动态程序 ,经过 OLE

45、DB 或者 ODBC 驱动的 ADO 与数据库进展数据交互 ,担任从数据层中查询出所要的统计信息 。表示层采用VML 动态生成统计结果图表 ,在此采用页面中嵌入 VML语句和运用 ASP 动态生成 VML 相结合的方式 ,动态生成表示统计结果的矢量统计图形 ,也就是生成了一个用文本言语表示的 Web 矢量统计图 。图 ASP 与 VML 结合原理图第五章 程序实现.义务概述.本次预期研讨的重点是：()研讨实现WEB统计图表的技术，分析VML与其他技术比较所具备的优点。()用VML实现柱形图，饼形图，曲线走势图等效果。. 研讨的难点是：做一个VML网页画图画板，能实现动态画图，例如可以画直线，矩

46、形，圆形，椭圆，圆形，还可以编辑文字，插入图片等等；学生选课投票统计数据在web中显示，数据是以柱形图和饼形图实现；电压合格率实时曲线在web中显示某个时段的电压合格率；数据是以曲线走势图实现；最后设计一个web综合图表的实现，采用ASP+VML言语实如今网页中输入数据，实现D柱形图，饼形图，曲线走势图年度统计等效果。.用户的特点Web图表是一种很好的将对象属性数据直观、笼统地“可视化的手段。基于VML言语设计Web统计图表，Web统计图表对象属性数据直观，提供可视化数据，操作简一方便，数据分布走势一目了然，尤其适宜各类运用计算机的管理人员。.需求规定本次设计研讨主要是用VML言语实现柱形图，

47、饼形图，曲线走势图等D效果。. Web信息流程构造设计：信息组织、关联和集成等是一种非常重要的信息重构，它对信息的查询、阅读及信息间的相互联络起着关键作用，应采用基于人性化的信息联想思想方式来设计整个图表系统的信息流向及相互关系等。需求对用户在信息探求活动过程中的信息阅读顺序、信息交互方式和信息相关联想等问题进展深化研讨，从而设计出一种为大多数用户所接受的图表系统，即经过多种方式来建立信息间的关系链接。. Web统计图表类型的选择：Web图表要表现的主题决议了图表的表现方式，根据主题来决议哪一种对比关系是主要的，哪一种是次要的。图表是经过数据信息的组织来展现或强调主题信息的。柱形图最适宜显示时

48、间序列的对比关系。普通情况下，尽量防止运用条形图显示随时间变化的信息特征，由于表示时间分布习惯于从左到右，而非从上到下。曲线走势图那么偏重于变化趋势，比较适宜反映对象开展趋势，而柱状图注重展现程度和数量，适宜表示某一时间段内的信息属性。 饼形图给人以整体的印象，因此，显示成分对比关系可用饼图来展现。假设数据项超越个，可保管个最重要部分，其他合并为“其它，以便使饼图发扬最大可视化效果。此外，根据需求，可将最重要的内容放在点的位置附近人眼习惯于顺时针方向看东西，同时可经过颜色、立体处置或分别等手段来突出显示。由于统计信息的多样性、复杂性，可经过图表间的相互叠加来展现信息间的内部构成对比、外部构造特

49、征对比以及对象的时态变化特征等。. Web统计图表界面设计：普通地，图表尽能够简约，假设需求采用组合图表构造，必需使图表层次化更为明晰，以便更为快速清楚地反映要表达的主题信息内容。由于Web图表运用在网络上，应尽量思索到各种用户计算机窗口的差别，将图表完好地显示在这些计算机的窗口上。例如：一致性是界面设计最根本的原那么，它是界面易于运用的关键，但有时为了让用户更直观地感受和了解图表要表现的主题，需求采用以下手段建立信息层次构造间的关系：加重颜色、运用阴影、加强对象轮廓、运用立体或写真符号、采用动态符号。另外，设计图表时，须全面思索影响图表可视化的要素，内部数据数值对比反差的大小，图表在空间分布

50、的密度以及小空间大图表矛盾等。. Web统计图表的实现：下面经过论述VML中的常用标志来阐明Web图表的实现步骤：. 运用Group标志创建一个容器，作为其它组成Web图表的VML标志的共同坐标系，经过设置Group标志的style属性可以确定图表的位置和大小等；. 经过添加Rect、Oval、Arc、Line、PolyLine等外形标志创建图表的主体。其中，Rect标志用于创建矩形，可由它来实现条形图和柱状图；Oval标志用于创建圆，Arc标志用于创建弧，结合这两个标志可以实现饼图；Line标志用于创建线段，Line标志是Line标志的变形，用于创建不规那么的延续的线段，这两个标志可用于创建

51、折线图。另外，VML提供一种默许外形标志Shape，经过指定其path属性可创建出需求的任何外形，上述一切标志都是由它派生出来的。在运用上述外形标志创建Web图表主体时，可运用外形标志的子标志Shadow和Fill来分别设置外形的阴影和填充效果来加强外形的显示效果和不同外形的对比效果；. 运用标志Line及其子标志Stroke来创建坐标系。Stroke标志中的StartRow和EndRow属性用于创建箭头；. 运用标志TextBox来设置图表的标题、图例和刻度的值。. Web统计图表的开发与设计：Web图表设计是以用户为中心的多学科设计，遭到视觉艺术、计算机技术、主题内容、图表用途以及心思感受

52、和信息设计等多种影响。在对统计信息在可视化时的根本属性进展分析与研讨后，给出Web图表的定义：Web图表泛指在阅读器中显示的，可直观展现统计信息属性时间性、数量性等，对知识发掘和信息直观生动感受起关键作用的图形构造。不同类型的Web图表能够具有不同的构成要素，如折线图普通要有坐标轴，而饼图普通没有。归纳起来，Web图表的根本构成要素有：标题、刻度、图例和主体等等。. 运转环境规定.设备：采用个人计算机(pc)，运用系统WindowsXP或windows，且支持IE以上阅读器。.支持软件：本次课题WEB统计图表的研讨，我主要采用VML言语实现，还会运用到ASP动态网页、Dreamweaver开发

53、工具和Access数据库。. 实现程序实例：. VML网页画图画板：实现该网页画图画板用到了vml言语和js脚本言语，保管以html为后缀名的网页文件。其实现的普通步骤如下：. 新建并命名VmlDraw.js文件，用记事本进展编辑，该文件主要是用来定义变量和函数，其伪代码：var VmlTool=new VmlDraw(); /定义VmlDraw变量；function VmlDraw()； /定义VmlDraw功能；var imageMenu,imageMove=,imagesets=new Array(); /定义右键菜单；var baseImage()； /定义双箭头、单箭头、直线、弧形、

54、圆形、长方形、圆矩形等运用款式；var left,top,width,height,rotation,id; /定义画板画图框架；var status; /定义在画板内:删除,:修正,:添加；oButton=owner.CreateButton()； /定义双箭头、单箭头、直线、弧形、圆形、长方形、圆矩形等相关控件；还要定义一些功能控件:oCell.appendChild(document.createElement(br);oButton=owner.CreateButton(oCell,biankuan,bon,huabi,左键点击目的图形);oButton.innerText=边框;oB

55、utton=owner.CreateButton(oCell,tianchong,bon,huabi,左键点击目的图形，支持背风光填充、背景图片、完全空心化); oButton.innerText=填充;oButton=owner.CreateButton(oCell,suofang,bon,huabi,左键点击目的图形);oButton.innerText=缩放;. 新建并命名vml画图画板.html文件，用记事本进展编辑，该文件主要是用VML实现画板画图和调用VmlDraw.js文件，其伪代码：() VML画图画板 /定义画板标题() /定义画板风格v:*behavior:url(#def

56、ault#VML); /VML言语的标识定义o:*behavior:url(#default#VML); /VML言语的标识定义select,input,button,textareafont-size:px /文本区域的大小定义atext-Decoration:none;color:red /文本区域的颜色定义a:hovertext-Decoration:underline;color:blue; /文本线条定义tablebackground-color:#FCDCF; /网页表格定义及字体定义tdfont-size:px;color:;spanfont-size:px;white-Spac

57、e:nowrap;.bonborder-bottom:solideeeeee;border-right:solid eeeeee;border-left:solidgray;border-top:solid gray;background-color:dddddd;color:blue;width:;cursor:hand;.bonborder-bottom:solidgray;border-right:solid gray;border-left:solidwhite;border-top:solid white;background-color:#FCDCF;color:maroon;wi

58、dth:;cursor:hand;font-family:宋体;.bonborder-bottom:solidmaroon;border-right:solid maroon;border-left:solidmenu;border-top:solid menu;background-color:#FED;color:purple;width:;cursor:hand;font-family:宋体;textareaborder: groove purple;#cencolor:maroon;font-weight:bold;width:%;height:%;cursor:move#xiaole

59、icolor:red.keshiposition:absolute;z-index:;. zhongyaocursor:hand;font-weight:bold;color:red /画板主题风格定义终了() /脚本言语的援用. 他们还可以在画板上插入图片：首先新建并命名uploadifream.htm文件，用记事本进展编辑，该文件主要是实现插入图片框架和嵌入vml画图画板.html文件中，其伪代码：() 下载框架页 /定义框架标题() function addFile() /定义插入文件功能 if(document.getElementById(inputid).value!=) vart

60、empid=inputid; parent.document.getElementById(ifreambutton).srcid=tempid;/文本元素的定义 parent.document.getElementById(ifreambutton).srcvalue=document.getElementById(inputid).value; document.getElementById(inputid).style.display=none; inputid=f+getuid(); varstr=; /定义插入图片框架 document.getElementById(filediv)