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中还有很多其他的统计图表，需详细了解可参考官方文档