《Ajax在实时绘制SVG图表中的应用研究》-毕业论文.docVIP

w Ajax在实时绘制SVG图表中的应用研究 摘 要：如今的很多网站都需要实时绘制图表，svg——可缩放矢量制图是一种新兴的技术，将来有机会会成为web图形下一代的重要技术。将svg和ajax技术结合，能够避免繁琐的网页图表重载。介绍创建一个简单的svg图表应用，通过异步方式从php脚本获取用户输入的数据和随机产生的数据，最终在网页上生成svg图表。 关键词：ajax svg 实时 异步 1 引言 在internet高速发展的今天，互联网已经成为了信息发布的主要平台。而很多互联网上的图形采用位图形式，不仅不易编辑，而且进行交互时需要和服务器进行频繁的通信，极大的限制了图形的实时绘制和编辑。使用ajax通过异步方式从服务器端获取数据，在浏览器中实时绘制svg图形的方式，目前已经成为了一项炙手可热的技术。 1.1 svg图形的优势 可缩放矢量图形（scalable vector graphics，svg）是基于可扩展标记语言（xml），它是描述二维矢量图形的图形格式，由w3c制定，是一个开放标准。svg严格遵从xml语法，用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。它是一种新兴的技术，就像flash一样，将有机会成为下一代web图形的重要技术。 svg图形格式优点： 1.1.1 基于xml svg是完全基于xml(extensible markup language可扩展置标语言)， 并能和xml相关各项技术相融会的新一代的网络图像格式。svg继承了xml的跨平台性和可扩展性，从而意味着它不仅仅是一种图像格式，它在图形可重用性上迈出了一大步。如svg可以内嵌于其他的xml文档中，而svg文档中也可以嵌入其他的xml内容，各个不同的svg图形可以方便地组合，构成新的svg图形。目前最常用的svg查看工具有adobe公司的adobe svg viewer 3。 1.1.2 采用文本来描述对象 svg包括3种类型的对象：矢量图形(包括直线、曲线在内的图形边)、点阵图像和文本。各种图像对象能够组合、变换，并且修改其样式，也能够定义成预处理对象。 与传统的图像格式不同的是，svg采用文本来描述矢量化的图形，如同html网页一样，svg图像文件可以像有着很好的可读性。当用户用图像工具输出svg后，可以用任何文字处理工具打开svg图像，看到用来描述图像的文本代码。掌握了svg语法的人可以只用记事本便读出图像中的内容。 1.1.3 具有交互性和动态性 svg是基于xml的，它具有卓越的动态交互性。可以在svg文件中嵌入动画元素(例如：运动路径、渐现或渐隐效果、生长的物体、收缩、快速旋转、改变颜色等)，还可以通过脚本定义来达到高亮显示、声音、动画等效果。 1.1.4 svg较gif、jpeg的优势 相对于gif、jpeg位图图像格式，svg是一种矢量图形格式。svg较gif、jpeg的优势显而易见： (1)任意放缩。 用户可以任意缩放图像显示，却不会破坏图像的清晰度、细节等。 (2)文本独立。 svg图像中的文字独立于图像，文字保留可编辑和可搜寻的状态。也不会再有字体的限制，用户系统即使没有安装某一字体，也会看到和他们制作时完全相同的画面。 (3)文件容量较小。 总体来讲，svg文件比那些gif和jpeg格式的文件要小很多，因而下载也很快。 (4)超强显示效果。 svg图像在屏幕上总是边缘清晰，它的清晰度适合任何屏幕分辨力和打印分辨力。 (5)超级颜色控制。 svg图像提供一个1600万种颜色的调色板，支持icc颜色描述文件标准、rgb、线x填充、渐变和蒙版。 1.2 ajax及其相关技术 ajax是asynchronous javascript and xml的缩写，它提供一种可以调用后台服务器获得数据的客户端javascript技术，它支持更新部分网页内容时不重载整个网页。在支持ajax的情形下，web应用程序可以通过调用后台服务器来验证数据，同时用户可以继续填写内容。ajax是一种非常灵活、交互性很强的web应用技术，它使得网页能够透明地异步调用服务器数据。ajax是一种web开发人员可以用来创建更加灵活的web应用程序的工具，而且它在与人进行交互方面比传统的web应用程序更好。 2 绘制图表的结构设计 现在有很多浏览器对svg的支持仍不成熟。firefox浏览器对svg提供了完善的支持。要加载svg到internet explorer，首先必须安装svg插件。安装过程非常简单，只需要下载svgviewer.exe安装文件并执行就可以了。第一次加载svg页面时，需要确认是否同意声明中的条款。 使用ajax和svg实现实时图表，首先创建一个文件夹svg_chart，在此文件夹中创建5个文件：