FusionCharts学习笔记

最新推荐文章于 2024-07-28 23:23:55 发布

weixin_33842328

最新推荐文章于 2024-07-28 23:23:55 发布

阅读量86

点赞数

文章标签： c# javascript java ViewUI

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

其次, 提供图表显示所需的容器如一个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

</categories>

</dataset>

</dataset>

</dataset>

</dataset>

</dataset>

</chart>

园友们相关文章

FusionCharts等产品简介

FusionCharts Free 图表库

FusionCharts 的XML标签属性

FusionCharts 组件全Flash图表

蜡人张 FusionCharts Free

另外附上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

weixin_33842328

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
FusionCharts学习笔记

去年有好几个项目需要用到图表显示, 原打算使用JFreeChart的, 但感觉其在外观展示与交互性方面都不如一些Flash Chart来得酷, 在网上搜索相关资料时候发现很多人推荐FusionCharts, 自己看了一下效果, 确实挺不错的. 也考虑过使用VML来实现统计图表的显示, 就像我在上一篇博文Web开发系列 - VML介绍VML中所说, VML仅限于IE浏览器, 最终还是决定使用Fus...
复制链接

扫一扫