个人开发历程知识库

关注C++/Java/C#技术, 致力于安防监控/移动应用/WEB方面开发
------------------------------------ 业精于勤,荒于嬉;行成于思,毁于随
posts - 163, comments - 751, trackbacks - 0, articles - 18
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

Web开发系列 - FusionCharts

Posted on 2009-07-25 23:54 peterzb 阅读(...) 评论(...) 编辑 收藏

   去年有好几个项目需要用到图表显示, 原打算使用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脚本

 function onShow()
 
{
    
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

<graph caption="日志统计情况" xAxisName="日志类型" yAxisName="Amount" rotateYAxisName="0" decimalPrecision="0"
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

<chart caption="系统日志统计" xAxisName="用户" yAxisName="次数" showValues="0" palette="2" shownames="1" legendBorderAlpha="0" useRoundEdges="1"
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
ScrollLine2D.swf



园友们相关文章

FusionCharts等产品简介


FusionCharts Free 图表库

FusionCharts 的XML标签属性

FusionCharts 组件 全Flash图表

蜡人张 FusionCharts Free


FusionCharts Free(1)

FusionCharts Free(2)

FusionCharts Free(3)

野路子实现的轻量级伪OLAP展示


另外附上C# WinForm开发系列相关文章如下:

C# WinForm开发系列 - GDI+

C# WinForm开发系列 - ZedGraph

C# WinForm开发系列 - OWC

C# WinForm开发系列 - Chart Controls

C# WinForm开发系列 - Report

C# WinForm开发系列 - Print

C# WinForm开发系列 - 文章索引

Web开发系列 - VML