去年有好几个项目需要用到图表显示, 原打算使用JFreeChart的, 但感觉其在外观展示与交互性方面都不如一些Flash Chart来得酷, 在网上搜索相关资料时候发现很多人推荐FusionCharts, 自己看了一下效果, 确实挺不错的. 也考虑过使用VML来实现统计图表的显示, 就像我在上一篇博文Web开发系列 - VML介绍VML中所说, VML仅限于IE浏览器, 最终还是决定使用FusionCharts. FusionCharts是一个基于Flash的图表组件,可以用来提供数据驱动的动态图标,FusionCharts可用于任何网页脚本语言如, HTML格式,JSP, Asp.Net, PHP技术等等。提供交互式和强大的动态图标,FusionCharts充分利用流体美丽的Flash为模板,使用XML作为其数据接口,创造紧凑,互动和真正的动态图表. 更多内容可以阅读去年我转载的一篇介绍FusionCharts文章[转载] FusionCharts的研究, 其官方主页为http://www.fusioncharts.com/, 相关例子可以访问http://www.fusioncharts.com/LiveDemos.asp.
结合自己在JSP项目中用户操作日志统计模块的实现, 来介绍FusionCharts中常见几种图表的实现过程. 当用户点击页面上的统计按钮时, 通过JavaScript对用户输入合法性进行验证判断后提交该请求, 由后台Servlet或Action对数据库中数据按照所需条件进行检索汇总, 得到的结果集按照FusionCharts控件所需的XML格式进行响应输出, 然后通过AJAX技术获取该XML内容给FusionCharts控件使用. 特别值得一提的是, FusionCharts附带的使用文档制作得很好, 非常全面具体, 按照其提供的文档去实现图表非常方便.
首先, 我们需要准备好用到的swf与FusionCharts.js等文件, 在JSP页面头部引入所需的JS文件. 这里AJAX库采用了精简之后的prototype, 大家可以采用自己熟悉擅长的,如JQuery, ext等JS库.
<script type="text/javascript" src="Admin/ecside/js/prototype_mini.js"></script>
<script type="text/javascript" language="javascript" src="Admin/JS/FusionCharts.js"></script>
其次, 提供图表显示所需的容器如一个Div, 这里我们提供了一个ID为chart1div的div
<div id="mbDIV" style="display: none;"></div>
<div id="loginDIV" style="top: 120px;left: 150px;display: none;" class="noprint">
<div id="loginTopDIV">
<div style="float:left;">日志统计情况div>
<div style="float:right;"><a href="javascript:onhidden();">[ 关闭 ]</a></div>
</div>
<div style="padding:15px;" class="noprint">
<div id="chart1div" ></div>
</div>
</div>
最后, 需要书写提交请求以及获取XML形式结果的JavaScript脚本
{
var logType=$('txtLogType').value;
var dt1=$('dt1').value;
var dt2=$('dt2').value;
// Define REST web service URL
var url = 'CountServlet';
// Prepare parameters to send into REST web service
var pars="status=logCount&txtLogType="+logType+"&dt1="+dt1+"&dt2="+dt2;
// Make web service AJAX request via prototype helper,
// upon response, call showResponse method
new Ajax.Request( url, { method: 'post', parameters: pars, onComplete: showResponse });
//To pass parameters, URLEncode the dataURL. Use escape() in JavaScript
//var url = escape("CountServlet?status=logCount&txtLogType="+logType+"&dt1="+dt1+"&dt2="+dt2);
}
// Method invoked when page receives AJAX response from REST web service
function showResponse(originalRequest)
{
var obj=document.getElementById('loginDIV');
obj.style.top = "60px";
obj.style.left = "200px";
var logType=document.getElementById('txtLogType').value;
var chartSWF;
if(logType == "-1")
{
chartSWF="Admin/Charts/FCF_Column3D.swf";
}
else
{
chartSWF="Admin/Charts/Pie3D.swf";
}
chartSWF = chartSWF + "?ChartNoDataText=当前查询结果为空";
//Create another instance of the chart.
var chart1 = new FusionCharts(chartSWF, "chart1Id", "550", "400", "0", "0");
var strXML = originalRequest.responseText;
chart1.setDataXML(strXML);
chart1.render("chart1div");
show("loginDIV");
show("mbDIV")
}
FCF_Column3D.swf
formatNumberScale ="0" baseFont ="Arial" baseFontSize ="12" >
< set name ="用户操作" value ="70" color ="AFD8F8" />
</ graph >
Pie3D.swf
< graph showNames = "1" decimalPrecision = "0" baseFont = "Arial" baseFontSize = "12" >< set name = "Web客户端用户登录" value = "10" />
< set name = "Web客户端用户退出" value = "5" />
< set name = "客户端登录" value = "12" />
< set name = "客户端退出" value = "12" />
< set name = "录像回放" value = "3" />
< set name = "实时监控" value = "28" />
</ graph >
ScrollColumn2D.swf
animation ="1" decimalPrecision ="0" formatNumberScale ="0" baseFont ="Arial" baseFontSize ="12" >
< categories >
< category label ="管理员" />
< category label ="FJSDXHXY" />
< category label ="监控中心" />
< category label ="维护人员" />
< category label ="师大监控中心" />
</ categories >
< dataset seriesName ="报警" color ="AFD8F8" showValues ="0" >
< set value ="68" />
< set value ="0" />
< set value ="0" />
< set value ="0" />
< set value ="0" />
</ dataset >
< dataset seriesName ="用户操作" color ="8BBA00" showValues ="0" >
< set value ="4600" />
< set value ="0" />
< set value ="71" />
< set value ="0" />
< set value ="0" />
</ dataset >
</ chart >
ScrollLine2D.swf
园友们相关文章
另外附上C# WinForm开发系列相关文章如下:
C# WinForm开发系列 - Chart Controls
本文转自peterzb博客园博客,原文链接:http://www.cnblogs.com/peterzb/archive/2009/07/25/1531087.html,如需转载请自行联系原作者。