AJAX + SVG 实现实时监控图表 - WEB 2.0技术 - ITPUB论坛

lastwinner
路边野花不要，踩！

世本冇谱，靠者多便有

精华贴数 18
个人空间 826
技术积分 40517 (19)
社区积分 28888 (35)
注册日期 2002-11-27
论坛徽章:188

#11

使用道具

发表于 2006-7-12 19:52

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

__________________

javascript:var c=document.body;c.innerHTML=c.innerHTML.replace(/28(d{3}) ((d8))/g,"28$1 ($2)");alert(c);

只看该作者

lastwinner
路边野花不要，踩！

世本冇谱，靠者多便有

精华贴数 18
个人空间 826
技术积分 40517 (19)
社区积分 28888 (35)
注册日期 2002-11-27
论坛徽章:188

#12

使用道具

发表于 2006-7-12 19:53

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

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

}

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

__________________

javascript:var c=document.body;c.innerHTML=c.innerHTML.replace(/28(d{3}) ((d8))/g,"28$1 ($2)");alert(c);

只看该作者

lastwinner
路边野花不要，踩！

世本冇谱，靠者多便有

精华贴数 18
个人空间 826
技术积分 40517 (19)
社区积分 28888 (35)
注册日期 2002-11-27
论坛徽章:188

#13

使用道具

发表于 2006-7-12 19:53

重点是以下代码：

PHP code:



function loadinfo(data)


{


DWRUtil.setValue(&quot;reply1&quot;, data);


    curr_degree=data;


    var svgDocument = window.sample.getSVGDocument();


chart=svgDocument.getElementById(&quot;line2&quot<img src="images/smilies/23.gif" smilieid="206" border="0" alt="" />;


chart.setAttribute( &quot;from&quot;, last_degree+&quot;,250,250&quot<img src="images/smilies/23.gif" smilieid="206" border="0" alt="" />;


    chart.setAttribute( &quot;to&quot;, curr_degree+&quot;,250,250&quot<img src="images/smilies/23.gif" smilieid="206" border="0" alt="" />;


    chart.beginElement();


    last_degree=curr_degree;


}


 ........

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

__________________

javascript:var c=document.body;c.innerHTML=c.innerHTML.replace(/28(d{3}) ((d8))/g,"28$1 ($2)");alert(c);

只看该作者

lastwinner
路边野花不要，踩！

世本冇谱，靠者多便有

精华贴数 18
个人空间 826
技术积分 40517 (19)
社区积分 28888 (35)
注册日期 2002-11-27
论坛徽章:188

#14

使用道具

发表于 2006-7-12 19:54

其中：

PHP code:



var svgDocument = window.sample.getSVGDocument();

得到SVG对象。

PHP code:



chart=svgDocument.getElementById(&quot;line2&quot<img src="images/smilies/23.gif" smilieid="206" border="0" alt="" />;

得到指针对象。

__________________

javascript:var c=document.body;c.innerHTML=c.innerHTML.replace(/28(d{3}) ((d8))/g,"28$1 ($2)");alert(c);

只看该作者

lastwinner
路边野花不要，踩！

世本冇谱，靠者多便有

精华贴数 18
个人空间 826
技术积分 40517 (19)
社区积分 28888 (35)
注册日期 2002-11-27
论坛徽章:188

#15

使用道具

发表于 2006-7-12 19:54

PHP code:



chart.setAttribute( &quot;from&quot;, last_degree+&quot;,250,250&quot<img src="images/smilies/23.gif" smilieid="206" border="0" alt="" />;


    chart.setAttribute( &quot;to&quot;, curr_degree+&quot;,250,250&quot<img src="images/smilies/23.gif" smilieid="206" border="0" alt="" />;


chart.beginElement();


 


........

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

__________________

javascript:var c=document.body;c.innerHTML=c.innerHTML.replace(/28(d{3}) ((d8))/g,"28$1 ($2)");alert(c);

只看该作者

lastwinner
路边野花不要，踩！

世本冇谱，靠者多便有

精华贴数 18
个人空间 826
技术积分 40517 (19)
社区积分 28888 (35)
注册日期 2002-11-27
论坛徽章:188

#16

使用道具

发表于 2006-7-12 19:55

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

PHP code:



<circle cx=&quot;250&quot; cy=&quot;250&quot; r=&quot;150.0&quot; fill=&quot;#ffffff&quot;/>


<path d=&quot;M143.93398282201787 356.0660171779821 A150.0 150.0 , 0, 0,


1,101.84674891072936 226.53483024396536 L250 250, Z&quot; class=&quot;fill1&quot;/>


<path d=&quot;M101.84674891072936 226.53483024396536 A150.0 150.0 , 0, 0,


1,181.90142503906804 116.34902137174478 L250 250, Z&quot; class=&quot;fill2&quot;/>


<path d=&quot;M181.90142503906804 116.34902137174478 A150.0 150.0 , 0, 0,


1,318.098574960932 116.34902137174484 L250 250, Z&quot; class=&quot;fill3&quot;/>


<path d=&quot;M318.098574960932 116.34902137174484 A150.0 150.0 , 0, 0,


1,398.1532510892706 226.53483024396536 L250 250, Z&quot; class=&quot;fill4&quot;/>


<path d=&quot;M398.1532510892706 226.53483024396536 A150.0 150.0 , 0, 0,


1,356.06601717798213 356.06601717798213 L250 250, Z&quot; class=&quot;fill5&quot;/>


<circle cx=&quot;250&quot; cy=&quot;250&quot; r=&quot;3&quot; style=&quot;fill: #00C&quot;/>


<line x1=&quot;129.7918471982869&quot; y1=&quot;370.208152801713&quot; x2=&quot;250&quot; y2=&quot;250&quot;


style=&quot;stroke: #F00;stroke-width: 2px&quot; id=&quot;finger&quot;>


<animateTransform attributeName=&quot;transform&quot; attributeType=&quot;XML&quot; 


type=&quot;rotate&quot; from=&quot;0,250,250&quot; begin=&quot;run()&quot;  to=&quot;20,250,250&quot; dur=&quot;2&quot;


fill=&quot;freeze&quot; style=&quot;stroke: #F00;stroke-width: 2px&quot; id=&quot;line2&quot;/>


</line>


 


............

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

__________________

javascript:var c=document.body;c.innerHTML=c.innerHTML.replace(/28(d{3}) ((d8))/g,"28$1 ($2)");alert(c);

只看该作者

lastwinner
路边野花不要，踩！

世本冇谱，靠者多便有

精华贴数 18
个人空间 826
技术积分 40517 (19)
社区积分 28888 (35)
注册日期 2002-11-27
论坛徽章:188

#17

使用道具

发表于 2006-7-12 19:55

结束语

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

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

__________________

javascript:var c=document.body;c.innerHTML=c.innerHTML.replace(/28(d{3}) ((d8))/g,"28$1 ($2)");alert(c);

只看该作者

lastwinner
路边野花不要，踩！

世本冇谱，靠者多便有

精华贴数 18
个人空间 826
技术积分 40517 (19)
社区积分 28888 (35)
注册日期 2002-11-27
论坛徽章:188

#18

使用道具

发表于 2006-7-12 19:56

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

关于下载方法的信息

Get Adobe® Reader®

__________________

javascript:var c=document.body;c.innerHTML=c.innerHTML.replace(/28(d{3}) ((d8))/g,"28$1 ($2)");alert(c);

只看该作者

lastwinner
路边野花不要，踩！

世本冇谱，靠者多便有

精华贴数 18
个人空间 826
技术积分 40517 (19)
社区积分 28888 (35)
注册日期 2002-11-27
论坛徽章:188

#19

使用道具

发表于 2006-7-12 19:56

参考资料

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

关于作者

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

__________________

javascript:var c=document.body;c.innerHTML=c.innerHTML.replace(/28(d{3}) ((d8))/g,"28$1 ($2)");alert(c);

只看该作者

lastwinner
路边野花不要，踩！

世本冇谱，靠者多便有

精华贴数 18
个人空间 826
技术积分 40517 (19)
社区积分 28888 (35)
注册日期 2002-11-27
论坛徽章:188

#20

使用道具

发表于 2006-7-12 19:56

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

__________________

javascript:var c=document.body;c.innerHTML=c.innerHTML.replace(/28(d{3}) ((d8))/g,"28$1 ($2)");alert(c);

只看该作者