AJAX + SVG 兑现实时监控图表

2013-01-23

AJAX + SVG 实现实时监控图表简介： AJAX 已经有很多文章介绍它的原理及其应用了。但是遗憾的是现在并没有很

AJAX + SVG 实现实时监控图表

简介： AJAX 已经有很多文章介绍它的原理及其应用了。但是遗憾的是现在并没有很多结合实际项目应用。本文结合实际项目中的应用来讲述利用 AJAX 和SVG 技术如何创建各种激动人心的功能，并附带可以运行的例子和源代码。

点击开始按钮，你会发现图表的指针会根据服务器的数据实时摆动。很类似与一个汽车仪器仪表盘，这是以往 cs 软件或者是 flash 才能实现的效果，现在我们使用纯 web 的形式实现了。

从专业术语来说，它实际上是一个 Dash Board，其实在各种 BI（商业智能）应用中都可以看到它，它的灵感来自于汽车的仪表盘，它非常直观的反映了当前数据的状态，例如处于危险，安全，过低等等。

当然它并不新鲜，很多软件都能提供这种图表，我们今天要使用 AJAX 和 SVG 来突破传统应用，以往的软件生成的图片都是静态的，注意我这里的静态是指它们生成的图片上的指针不会像真正的汽车仪表盘一样随着汽车的各种数据的变化，例如速度、油量的变化而摆动，根据汽车的实时速度而摆动，而是用户刷新一次页面，软件根据服务器端的数据重新生成图片再显示给最终用户。

传统的这种方式对于一般的 BI 应用来说是完全足够了，但是对于实时性要求比较高的系统来说，利用监控系统来说，不可能要求用户随时刷新页面，或者使用 JavaScript 来定时刷新页面，这样效果非常差，而且服务器端反复在内存，或者硬盘中生成图片，用户数量多之后，系统负担太重了。

我们抛开技术想一下，我们实际上只想改变指针的位置就行了，根本没有必要生成整个图片或者是传递整个图片的数据给客户端。这种设置非常不合理，但是这在以往的技术上是难以完成的。

现在如果使用AJAX技术，我们只需要传输过来当前的数据，告诉仪表盘的指针应该指向哪里就行了。无需页面刷新，无需重新生成图片，并且网络端，服务器端，用户端的开销都非常少，以往的方案没有经验的程序员经常会导致内存溢出，现在采用这种方案这种错误的风险就大大减小了。

import java.util.Random;public class MeterRemote {private double curr_value,full_value=200;public double getDegree(){Random r=new Random();curr_value=r.nextInt(200);return curr_value/full_value*270;}}

接着我们利用 DWR 引擎把该 Java 类发布，让远程 AJAX 应用能够调用该 Java 类的方法 getDegree（）。

打开 dwr.xml 文件，在本文提供的例子从您可以看到它，添加如下代码：

这样 DWR 就把一个 Java 类发布出来了，可以在页面通过 js 就可以直接调用它了，非常的简单。它和大多数框架一样使用了一个 xml 文件来完成自己的配置，使用 creat 标签可以发布一个 java 类，creator=new 表明创建方式是通过new来创建实例，java 类这里的配置都是一样的，因为它支持spring和struts才会有不同的creator。Javascript="MeterRemote"说明了它在页面中使用MeterRemote对象(js对象)来调用。Param标签就定义了具体的类的名称。使用DWR还可以指定调用的权限和指定具体的java类的方法，而不是把所有的对象的方法都发布出来。跟多的配置信息请查阅ibm上其它文章。

重新启动服务器，使用浏览器打开如下地址：
http://localhost:8080/ajaxSVG/dwr

如下图所示：

会看到MeterRemote链接，说明发表成功了，单击该链接http://localhost:8080/ajaxSVG/dwr/test/MeterRemote会看到测试页面，它上面包含了如何使用，和可以调用的方法。

如下图所示：

你可以点击 Excute 来测试一下效果，这样网页就能够直接调用 java 端的程序了。接着我们看看 JSP 文件。

首先导入 js，这样才能：

1.<script type='text/javascript' src='/ ajaxSVG/dwr/engine.js'></script>2.<script type='text/javascript' src='/ ajaxSVG/dwr/util.js'></script>3.<script type='text/javascript'src='/ ajaxSVG/dwr/interface/MeterRemote.js'></script>

1,2行是DWR引擎所需要的两个js文件。第3行是导入DWR引擎调用POJO java所需要的js文件。

function getValue(){ MeterRemote.getDegree(loadinfo); }

上面的方法从服务器端取得仪表盘的指针的数据。

重点是以下代码：

function loadinfo(data){DWRUtil.setValue("reply1", data); curr_degree=data; var svgDocument = window.sample.getSVGDocument();chart=svgDocument.getElementById("line2");chart.setAttribute( "from", last_degree+",250,250"); chart.setAttribute( "to", curr_degree+",250,250"); chart.beginElement(); last_degree=curr_degree;}

上面的代码根据远程调用得到的仪表盘的指针数据来动态的改变SVG图中指针的位置。

其中：

var svgDocument = window.sample.getSVGDocument();

得到SVG对象。

chart=svgDocument.getElementById("line2");

得到指针对象。

chart.setAttribute( "from", last_degree+",250,250"); chart.setAttribute( "to", curr_degree+",250,250");chart.beginElement();

远程调用得到的仪表盘的指针数据来动态的改变SVG图中指针的位置。

最后我们看看SVG文件，下面是值得关注的代码部分

实际上上面的 SVG 代码定义了一个静态的指针指向 0 度的仪表盘。它由 <path> 标签定义的。它往往是通过软件来生产的，因为能生成 SVG 图表的软件非常多，例如 jfreechart 等，和文章篇幅限制就不详细结束 SVG 图表了。

回页首

结束语

使用本例子的原理我们已经在数个实际项目中应用了，从用户使用的实际效果来说，性能和效果都非常满意。替代了以往用户使用 CS 软件才能实现的实时监控图表的功能，现在 AJAX 替代传统的各种 MVC（例如Struts，JSF）框架并不能显示出它的威力，特别是在开发 AJAX 工具奇缺，开发测试效率低下。但是它与其他技术的融合例如 SVG，往往能发挥意想不到的效果。AJAX 和各种新兴的 Web 2.0 技术的出现大大的丰富了 Web 程序员的技术力量，把以往只有 CS 软件才能实现的功能，不仅实现了，而且更加完美和高效。

拥抱 AJAX 拥抱 Web 2.0 你能做得更好！

热点排行

Ajax

AJAX + SVG 兑现实时监控图表