在wabacus框架上集成图表组件经验谈-highcharts

在wabacus论坛里一位仁兄发表了一篇《使用动态报表来完成图形报表—FusionCharts》的文章，总结的挺好，有兴趣的朋友可以去看看http://tieba.baidu.com/club/10732962/p/20198128.

我就那帖子进行补充，我用的是highcharts报表组件，并且使用的是树形表格统计方式，那位仁兄使用自动列表统计方式，所以在获取数据的方式也不一样。据作者所说，不能在动态模版中获取树形表格统计的数据，所以只能自己写sql语句获取。先看一下整体效果把，

 

第一步：先开发完标准的wabacus报表，示例代码如下（方便上传，截图形式）

 

 这个地方要注意两点，第一，οnlοad="testonload" ，在page中要配置一下这个方法的js文件，这个是调用报表显示的js代码，highcharts是一个纯JS图形报表，第二，要配置报表拦截器，这个拦截器的dostart()方法是获取查询条件的数据。

第二部：编写动态模板，示例代码如下：

<%@page import="cn.edu.hrbeu.util.Statistics"%>
<%
	Statistics statistics = new Statistics();
	HttpSession session1 = request.getSession();
	List mylist = (List) session.getAttribute("list");
	String bumen= mylist.get(0);
	//获取柱状图数据
	List datelist = statistics.getSexData(mylist);
	String cate = datelist.get(0);
	String a1 = "男," + datelist.get(1);
	String a2 = "女," + datelist.get(2);
	String data = a1 + "\n" + a2;
	//获取饼状图数据
	List datelist1 = statistics.getSexPieData(mylist);
	int data1 = datelist1.get(0);
	int data2 = datelist1.get(1);
%>


	
		
		
		
		
	
	
	
		
		
		
		
		
		

		

		

	

  数据的获取是自己写的sql语句，数据格式我已经我把组装成类似于CVS文件的格式

 

 

 

事业部,人才资源部

男,24,3

女,3,0

 

 

 

这个地方读者注意一下，也可以组装成JSON格式的，用过highcharts的都知道，highcharts怎么加载数据的，读者可以参考这篇文章http://kb.cnblogs.com/a/2311352/.

 

第三步：用js获取数据，并显示图表，示例代码如下：function mkChar(){

	var bumen = document.getElementById("bumen").value;
	if(bumen.length==0){
		bumen="整个研究所";
	}
	var options ={
        chart: {
            renderTo: 'container',
            type: 'column'
        },
        title: {
            text: bumen+'性别统计'
        },
       
        xAxis: {
           categories:[],
            labels: {
                rotation: -65,
                 align: 'right',
                  style: {
                    fontSize: '16px',
                    fontFamily: 'Verdana, sans-serif'
                }
                 
              }
         },
        yAxis: {
            min: 0,
            title: {
                text: '人数 (个)'
            }
        },
        legend: {
            layout: 'vertical',
            backgroundColor: '#FFFFFF',
            align: 'left',
            verticalAlign: 'top',
            x: 200,
            y: 5,
            floating: true,
            shadow: true
        },
        credits:{
						
						text:''
		},
        
        tooltip: {
            formatter: function() {
                return ''+
                    this.x +': '+ this.y +' 人';
            }
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: []

	};
	var cate = document.getElementById("cate").value;
	var data= document.getElementById("data").value;
	var items = cate.split(',');
	for(i=0; i   
  
要运行起图形来还需要一些其他的文件,三个脚本：jquery.min.js，highcharts.js，exporting.js.这样就大功告成了。