FusionChartsFree 柱状统计图表实现

最近在做报表统计方面的模块，用了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="生成状态图" onclick="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中还有很多其他的统计图表，需详细了解可参考官方文档