Fusioncharts图表组件在宿舍评分统计中的应用
上篇blog说了要展示下Fusioncharts在系统中的使用,现在就分享下自己在这块的应用。
首先向大家展示下这个效果是怎样的。
鼠标点击相关数据行,弹出隐藏DIV。
前台JSP需要文件:
- FusionCharts.js(核心JS类库)
- Pie3D.swf(此系统宿舍评分情况统计正好是12个月,刚好可以用这个flash,FusionCharts有很多各种各样的SWF,大伙可以根据在开发中的实际情况选择不同的SWF)
- 前台JSP:需要定义一个DIV,此DIV先隐藏,当触发事件时,显示并展示数据。
后台:后台大家可以根据实际情况,总之就是要想方设法返回XML数据,当然,说到这,有基础的都会想到AJAX,实际上应该都是前台发送请求,交由AJAX引擎,后台逻辑处理,返回XML数据。贴一下程序中的返回XML数据的程序块(我的是在Action中返回)。
返回XML数据之后,就交由Pie3D.swf来解析啦,其实Pie3D.swf解析有两种方法,一种是setDataUrl,另外一种就是setDataXML。setDataUrl需要产生XML文件,关于这个大家可以直接用I/O去构建,也可以借助插件,比如dom4j,但是我在尝试构建文件的过程中,发现这个构建文件是无法往深层构建的,所以这个方法我也没试成功,我使用的是后者,先贴下代码给大家看下,而且这个还不能写在JS文件中,只能写在JSP文件里面,不然实现不了。
图片里的PieDiv即JSP里面隐藏的Div。
至此,FusionCharts图标组件就应用成功,关于这个组件的好处,别的不多说,至少对于用户来说,会有很高的体验,而一个系统的用户体验可以是衡量一个系统是否优秀的重要指标。