AJAX + SVG 实现实时监控图表

核心提示： 阅读本文最好具有下列知识：1. AJAX 开发应用2．SVG 相关知识，特别是与JavaScript交互，AJAX + SVG 实现实时监控图表(2)，(developerworks 上有非常详尽 SVG 的技术文章)3． DWR基础， (developerWworks 上有非常详尽的DWR框架

阅读本文最好具有下列知识：

1. AJAX 开发应用

2．SVG 相关知识，特别是与JavaScript交互。(developerworks 上有非常详尽 SVG 的技术文章)

3． DWR基础。 (developerWworks 上有非常详尽的DWR框架的技术文章和例子，本文不详细结束DWR基础知识。)例如： http://www.ibm.com/developerworks/cn/java/j-ajax3/

实际效果

技术叙述的再好，不如一个实际的例子，我们先看看实际效果。读者可以先下载本文附带的例子，发布到任何一个支持JSP1.1的servle服务器上，例如Tomcat4.0或者 webshpere,weblogic上，然后访问页面：http://localhost:端口/ajaxSVG/DyMeter.jsp。(以 Tomcat为例，端口就是8080)

查看原图（大图）

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

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

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