AJAX + SVG 实现实时监控图表

lastwinner

你可以点击 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>

lastwinner

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


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


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

lastwinner

重点是以下代码：

[php]
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;
}
........
[/php]


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

lastwinner

其中：


[PHP]  var svgDocument = window.sample.getSVGDocument(); [/PHP]
  


得到SVG对象。


[PHP] chart=svgDocument.getElementById("line2";[/PHP]



得到指针对象。

lastwinner

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

........
[/php]

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

lastwinner

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

[php]
<circle cx="250" cy="250" r="150.0" fill="#ffffff"/>
<path d="M143.93398282201787 356.0660171779821 A150.0 150.0 , 0, 0,
1,101.84674891072936 226.53483024396536 L250 250, Z" class="fill1"/>
<path d="M101.84674891072936 226.53483024396536 A150.0 150.0 , 0, 0,
1,181.90142503906804 116.34902137174478 L250 250, Z" class="fill2"/>
<path d="M181.90142503906804 116.34902137174478 A150.0 150.0 , 0, 0,
1,318.098574960932 116.34902137174484 L250 250, Z" class="fill3"/>
<path d="M318.098574960932 116.34902137174484 A150.0 150.0 , 0, 0,
1,398.1532510892706 226.53483024396536 L250 250, Z" class="fill4"/>
<path d="M398.1532510892706 226.53483024396536 A150.0 150.0 , 0, 0,
1,356.06601717798213 356.06601717798213 L250 250, Z" class="fill5"/>
<circle cx="250" cy="250" r="3" style="fill: #00C"/>
<line x1="129.7918471982869" y1="370.208152801713" x2="250" y2="250"
style="stroke: #F00;stroke-width: 2px" id="finger">
<animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="0,250,250" begin="run()"  to="20,250,250" dur="2"
fill="freeze" style="stroke: #F00;stroke-width: 2px" id="line2"/>
</line>

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

lastwinner

结束语

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

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

lastwinner

下载
描述 Sample application
名字 ajaxSVG.rar
大小 11KB
下载方法 HTTP





关于下载方法的信息

Get Adobe&reg; Reader&reg;

lastwinner

参考资料

• 更多有关 ajax 的资源请参考：Ajax 技术资源中心。

关于作者


皮振华 毕业于武汉大学，现就职与北京能博文公司，从事 EAI/EIP 工作。自由撰稿人，对各种开源产品、技术非常感兴趣。你可以在 IBM developerWorks 和其它媒体杂志看到他的技术文章。Email：pi_zh@emarkets.cn

lastwinner

文档链接： http://www-128.ibm.com/developer ... -ajaxsvg/index.html
全文完