在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.这样就大功告成了。
?
?
?
?
?
?
?
?
?
?
?
?
?
?
1 楼
lgwt9829
2012-03-26
写的不错哦~