FusionCharts学习笔记

FusionCharts学习笔记
去年有好几个项目需要用到图表显示, 原打算使用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
相关阅读:
As3支持的Html标签一览
 SharpPcap 3.4使用范例
 十六章：构建自定义集合（Part 2）
十七章：反射、特性和动态编程（Part 1）
十六章：构建自定义集合（Part 1）
Implementing Finalize and Dispose to Clean Up Unmanaged Resources
HDU1711Number Sequence(KMP)
HDU2087剪花布条（KMP）
HDU1671Phone List (trie树)
HDU 1075 What are you talking about(trie树)
原文地址：https://www.cnblogs.com/aaa6818162/p/2034425.html