AJAX + SVG 实现实时监控图表

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

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

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

原理

其实原理并不复杂，我们利用 SVG 来绘制仪表盘，然后利用 AJAX 技术定时向服务器请求更新数据（也就是指针所指向的数据），如果数据更新了，则调用 JavaScript 脚本让SVG 的仪表盘重新定位指针，这样就实现了图表的实时刷新。下图描述了各种技术的在本教程中的用途。

查看原图（大图）

代码细节

这个例子程序由一个 SVG 文件，JSP 文件，和一个 JAVA 类组成：

MeterRemote.java

MeterChart.svg

DyMeter.jsp

首先看看 MeterRemote.java，它生成了指针所指向的数据，作为例子我只是生成一个随机数据，在实际项目中它就应该是返回实际的数据，例如，汽车仪表盘就是当前汽车的时速。它们在实际项目中可以来自在实际项目中数据可以是来自数据库，JMS，Web 服务，EJB 等。