最近在做报表统计方面的模块,用了FCF感觉还是蛮不错的,FCF是InfoSoft Global公司的一个免费的Flash图表统计产品,当然也有收费的,不过免费的已经能够满足大部分客户的要求了。
FCF官方下载地址:http://www.fusioncharts.com/free/download/
FCF官网的文档写的还算比较详细吧,但是只能参考而已,对于实际项目中运用还是要做一定的修改。
(1)所需文件
FCF_Column2D.swf (2D柱状图)
FCF_Column3D.swf (3D柱状图)
FusionCharts.js (如果想用js方式加载,则是必须的)
(2) 代码实现(jsp)
在页面头部中引入js文件:
<script text=”text/javascript” src=”FusionCharts.js”></script>
项目中用了jQuery所以也将jQuery的包引入
<script text=”text/javascript” src=”jquery-1.4.4-min.js”></script>
Html代码:
<divid="statisticDiv" style="width:100%;height:100%">
<!---falsh的统计图表将在这个div中显示-->
</div>
<input type="button" value="生成状态图" οnclick="startStatistic()"/>
js方法:
var gDayMap; //保存数据的全局变量
function startStatistic(){
//运用jquery的ajax获取数据
$.ajax({
url:'initStatistic.do',
data:{startDate:startDate,endDate:endDate},
type:'POST',
dataType:'json',
success:function (data){
gDayMap = data.dayMap;
generateDay3DColumn();
},
error:function (){
alert("Error!");
}
});
}
//用于生成3d柱状图
function generateDay3DColumn(){
$('#statisticDiv').empty(); //每次调用这个方法的时候都先将div清空,不然的话统计图表会叠加起来
var dayMap = gDayMap;
var mapLen = 0;
for(var k in dayMap){ //有时候查出的数据有可能是空的,所以在这里需要判断数据的长度
mapLen++;
}
if(mapLen == 0){ //等于0表示没有统计数据,在div中插入以下代码
$("<span>没有统计数据</span>").appendTo($('#statisticDiv'));
}else{
var strXML = "";
strXML += "<graph caption='' xAxisName='' yAxisName='' decimalPrecision='0' formatNumberScale='0'>";
for(var i=1; i<=31; i++){ //这里我要统计的是一个月的数据,所以这里循环31次
var dayCount = 0;
if(dayMap[i] != undefined){
dayCount = parseInt(dayMap[i]); //每天数据
}
strXML += "<set name='"+i+"' value='"+dayCount+"' color='"+randomColor()+"' />"; //这里调用了randomColor方法,能产生随机颜色
}
strXML += "</graph>";
//第1个参数为需要的swf文件,第2过参数为这个chart对象取一个ID,要唯一的,第3个参数为width,第4个参数为height
var my3dColumnChart = new FusionCharts("FusionCharts/swf/FCF_Column3D.swf","my3dColumnChart","1000","500");
my3dColumnChart.setDataXML(strXML); //加载数据
my3dColumnChart.render("statisticDiv"); //渲染到页面上的div上
}
}
//随机生成颜色
function randomColor(){
var rand = Math.floor(Math.random() *0xFFFFFF).toString(16);
if(rand.length == 6){
return rand;
}else{
return randomColor();
}
}
(3) 运行结果
(4)总结
以上代码只是FCF单系列的3D柱状图,FCF中还有很多其他的统计图表,需详细了解可参考官方文档