AJAX + SVG 实现实时监控图表

核心提示： 上面的代码根据远程调用得到的仪表盘的指针数据来动态的改变SVG图中指针的位置，其中：varsvgDocument=window.sample.getSVGDocument();得到SVG对象，AJAX + SVG 实现实时监控图表(6)，chart=svgDocument.getElementB

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

其中：

　var　svgDocument　=　window.sample.getSVGDocument();　

得到SVG对象。

chart=svgDocument.getElementById("line2");　

得到指针对象。

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

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

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

<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>　

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

结束语

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

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