以文本方式查看主题 - 中文XML论坛 - 专业的XML技术讨论区 (http://bbs.xml.org.cn/index.asp) -- 『 SVG/GML/VRML/X3D/XAML 』 (http://bbs.xml.org.cn/list.asp?boardid=21) ---- AJAX + SVG 实现实时监控图表 (http://bbs.xml.org.cn/dispbbs.asp?boardid=21&rootid=&id=51251) |
-- 作者:卷积内核 -- 发布时间:8/11/2007 5:13:00 PM -- 重新启动服务器,使用浏览器打开如下地址: http://localhost:8080/ajaxSVG/dwr 如下图所示: 如下图所示: 首先导入 js,这样才能: 1.<script type='text/javascript' src='/ ajaxSVG 1,2行是DWR引擎所需要的两个js文件。第3行是导入DWR引擎调用POJO java所需要的js文件。 function getValue() } 上面的方法从服务器端取得仪表盘的指针的数据。 重点是以下代码: function loadinfo(data) 上面的代码根据远程调用得到的仪表盘的指针数据来动态的改变SVG图中指针的位置。 其中: var svgDocument = window.sample.getSVGDocument(); 得到SVG对象。 chart=svgDocument.getElementById("line2"); 得到指针对象。 chart.setAttribute( "from", last_degree+",250,250"); 远程调用得到的仪表盘的指针数据来动态的改变SVG图中指针的位置。 最后我们看看SVG文件,下面是值得关注的代码部分 <circle cx="250" cy="250" r="150.0" fill="#ffffff"/> 实际上上面的 SVG 代码定义了一个静态的指针指向 0 度的仪表盘。它由 <path> 标签定义的。它往往是通过软件来生产的,因为能生成 SVG 图表的软件非常多,例如 jfreechart 等,和文章篇幅限制就不详细结束 SVG 图表了。
结束语 使用本例子的原理我们已经在数个实际项目中应用了,从用户使用的实际效果来说,性能和效果都非常满意。替代了以往用户使用 CS 软件才能实现的实时监控图表的功能,现在 AJAX 替代传统的各种 MVC(例如Struts,JSF)框架并不能显示出它的威力,特别是在开发 AJAX 工具奇缺,开发测试效率低下。但是它与其他技术的融合例如 SVG,往往能发挥意想不到的效果。AJAX 和各种新兴的 Web 2.0 技术的出现大大的丰富了 Web 程序员的技术力量,把以往只有 CS 软件才能实现的功能,不仅实现了,而且更加完美和高效。 拥抱 AJAX 拥抱 Web 2.0 你能做得更好! |
-- 作者:markbn -- 发布时间:1/4/2008 9:48:00 AM -- 用tomcat服务器,怎么样配置才可以用呢 您好!请问用tomcat服务器,怎么样配置才可以用呢,如果可以请加我的QQ:527370525. |
-- 作者:markbn -- 发布时间:1/9/2008 11:01:00 AM -- 怎么找不到三个js文件呢, |
-- 作者:markbn -- 发布时间:1/10/2008 9:36:00 AM -- 各位高手,请问楼主,我在用你那个例子的时候,点开始就显示页面错误.提示是 function getValue() { MeterRemote.getDegree(loadinfo); }的MeterRemote未定义.这是怎么回事,我只是把你那个例子下来,然后在tomcat上的server.xml的配置是这样的. <Host appBase="webapps" name="ajax.localhost"> <Context path="/ajaxSVG" docBase="D:\ajaxSVG" /> </Host>,请问问题出现在那里呢? |
W 3 C h i n a ( since 2003 ) 旗 下 站 点 苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》 |
62.500ms |