在wabacus框架上集成图表组件经验谈-highcharts
在wabacus论坛里一位仁兄发表了一篇《使用动态报表来完成图形报表—FusionCharts》的文章，总结的挺好，有兴趣的朋友可以去看看http://tieba.baidu.com/club/10732962/p/20198128.
我就那帖子进行补充，我用的是highcharts报表组件，并且使用的是树形表格统计方式，那位仁兄使用自动列表统计方式，所以在获取数据的方式也不一样。据作者所说，不能在动态模版中获取树形表格统计的数据，所以只能自己写sql语句获取。先看一下整体效果把，
?
第一步：先开发完标准的wabacus报表，示例代码如下（方便上传，截图形式）
?
<report id="test11111f" title="柱状图显示" onload="testonload" interceptor="cn.edu.hrbeu.intercept.SexInterceptor" template="/tagpages/dynamictemplatesex.jsp" ><display labeltdwidth="120px" ><col column="xuhao" label="序号"/></display><sql><select><value><![CDATA[select xuhao from person where {#condition#} order by xuhao]]></value> <condition name="bumen" label="部门"> <value><![CDATA[(bumen like %#data#%)]]></value> <inputbox type="selectbox"> <option value="" label="部门"></option> <option source="@{select distinct bumen from person}" label="bumen" value="bumen"></option> </inputbox> </condition> </select></sql></report>?这个地方要注意两点，第一，onload="testonload" ，在page中要配置一下这个方法的js文件，这个是调用报表显示的js代码，highcharts是一个纯JS图形报表，第二，要配置报表拦截器，这个拦截器的dostart()方法是获取查询条件的数据。
第二部：编写动态模板，示例代码如下：
<%@page import="cn.edu.hrbeu.util.Statistics"%><%Statistics statistics = new Statistics();HttpSession session1 = request.getSession();List<String> mylist = (List) session.getAttribute("list");String bumen= mylist.get(0);//获取柱状图数据List<String> 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<Integer> datelist1 = statistics.getSexPieData(mylist);int data1 = datelist1.get(0);int data2 = datelist1.get(1);%><!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Highcharts Example</title><script type="text/javascript" src="../js/jquery.min.js"></script><script type="text/javascript" src="../js/testcallback.js"></script></head><body><script src="../js/highcharts.js"></script><script src="../js/exporting.js"></script><input type="hidden" id="cate" value="<%=cate%>" /><input type="hidden" id="data" value="<%=data%>" /><input type="hidden" id="data1" value="<%=data1%>" /><input type="hidden" id="data2" value="<%=data2%>" /><input type="hidden" id="bumen" value="<%=bumen%>" /><wx:searchbox /><br /><div id="container"style="min-width: 400px; height: 400px; margin: 0 auto"></div></body>? 数据的获取是自己写的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<items.length;i++){options.xAxis.categories.push(items[i]);}var lines = data.split('\n');for(i=0; i<lines.length;i++){var series = { data: [] }; var myline = lines[i].split(',');for(j=0;j<myline.length;j++){if(j==0){series.name=myline[j];}else{series.data.push(parseFloat(myline[j]));}}options.series.push(series);}var chart = new Highcharts.Chart(options);}?要运行起图形来还需要一些其他的文件,三个脚本：jquery.min.js，highcharts.js，exporting.js.这样就大功告成了。
?
?
?
?
?
?
?
?
?
?
?
?
?
?
写的不错哦~