使用wabacus框架开发图形报表—FusionCharts
项目进入到中后期，迭代需求慢慢浮出，客户想更直观的看到各种分析报表的需求也越来越强烈，在使用wabacus开发完毕相关业务表单的数据编辑后，图形化报表进入项目的切实开发阶段，因wabacus作为国内新兴的开发快速平台，其开发效率非常可观，而且又开放了诸多接口方便在此上面进行一些特殊功能开发，故特此研究了一下关于图形报表的开发使用，在此，我们选用FusionCharts作为图形控件，数据组织成xml格式（也可以组织成json）。下面是做的一个的例子，供大家参看交流。
第一步：先开发完标准的wabacus报表，示例代码如下
其中<report/>标签中的template是所引用的动态模板。
第二部：编写动态模板，示例代码如下：
大家一定想知道我拼装成的xml到底是什么样子,如下图
运行效果如下：
还可以轻易换成饼状图
了解FusionCharts的朋友可能知道，这个饼是可以动的，呵呵……
要刚换成此种效果，只需要更换动态模板中引用的图形模型即可，即jsp示例代码中37行最后的“Column3D.swf”更换为“Pie3D.swf”。
当然，要运行起图形来还需要一些其他的文件,三个脚本：FusionCharts.js，highcharts.js，jquery.min.js，均与图形模板放在一个目录下即可。
想要详细了解FusionCharts的朋友，可以从其官方下载，里面有个示例，教大家一步步的实现Creating your First Chart~！
第一步：先开发完标准的wabacus报表，示例代码如下
<report id="report1" title="图形报表" pagesize="10" template="/myproject/resource/jsp/tagpages/test.jsp">
<display>
<col column="M_TYPE" label="设备类型"></col>
<col column="NUM" label="数量" ></col>
</display>
<sql>
<select>
<value>
<![CDATA[
select m_type,count(*) num from YW_MACHINE_MODIFY_BY_INTER where {#condition#} group by m_type
]]>
</value>
<condition name="txtqqs" label="报修起始时间" defaultvalue="2012-1-1" labelstyle="2">
<value>
<![CDATA[(Q_DATE >=to_date('#data#','YYYY-MM-DD'))]]>
</value>
<inputbox type="datepicker" ></inputbox>
</condition>
condition name="txtqjz" label="截止时间" labelstyle="2" >
<value>
<![CDATA[(Q_DATE <= to_date('#data#','YYYY-MM-DD') )]]>
</value>
<inputbox type="datepicker"></inputbox> </condition>
</select>
</sql>
</report>
其中<report/>标签中的template是所引用的动态模板。
第二部：编写动态模板，示例代码如下：
<%@page language="java" contentType="text/html;charset=UTF-8" pageEncoding="utf-8"%>
<%@page import="com.wabacus.system.component.application.report.abstractreport.AbsReportType"%>
<%@page import="com.wabacus.system.assistant.ReportAssistant"%>
<%@page import="com.wabacus.system.ReportRequest"%>
<%@page import="java.util.List"%>
<%@taglib uri="wabacus" prefix="wx"%>
<html>
<head>
<title>图形报表示例</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/myproject/resource/jsp/tagpages/FusionCharts/FusionCharts.js"></script>
</head>
<body >
<wx:searchbox/><br/>
<wx:title/><br/>
<div id="chartContainer" style="width:800px; height:300px;"> FusionCharts will load here!</div>
<%
AbsReportType reportTypeObj=(AbsReportType)request.getAttribute("WX_REPORTTYPE_OBJ");//取到当前报表对象
List lstData=reportTypeObj.getLstReportData();//从报表对象中取到此报表所有数据
String graph = "<chart caption='设备统计' xAxisName='类别' yAxisName='数量' numberPrefix=''> ";//拼装XML文件
String set = "";
for(int i=0;i<lstData.size();i++){
Object objlabel = ReportAssistant.getInstance().getPropertyValue(lstData.get(i),"M_TYPE"); //获取报表中列的值
Object objvalue = ReportAssistant.getInstance().getPropertyValue(lstData.get(i),"NUM");
String label = objlabel.toString();
String value = objvalue.toString();
set = set+"<set label='"+label+"' value='"+value+"' />";
}
graph += set+"</chart>";
graph = graph.replaceAll("%","");
graph = graph.replaceAll("&"," ");
%>
<wx:data/><br/>
<script type="text/javascript">
var myChart = new FusionCharts( "<%=request.getContextPath()%>/myproject/resource/jsp/tagpages/FusionCharts/Column3D.swf","myChartId", "80%", "100%", "0", "1" );
var myData ="<%=graph%>";
myChart.setDataXML(myData);//加载拼装完的xml
myChart.render("chartContainer");
</script>
</body>
</html>
大家一定想知道我拼装成的xml到底是什么样子,如下图
<chart caption='设备统计' xAxisName='类别' yAxisName='数量' numberPrefix=''>
<set label='笔记本' value='1' />
<set label='打印机' value='14' />
<set label='台式机' value='3' />
<set label='网络' value='1' />
</chart>
运行效果如下：
还可以轻易换成饼状图
了解FusionCharts的朋友可能知道，这个饼是可以动的，呵呵……
要刚换成此种效果，只需要更换动态模板中引用的图形模型即可，即jsp示例代码中37行最后的“Column3D.swf”更换为“Pie3D.swf”。
当然，要运行起图形来还需要一些其他的文件,三个脚本：FusionCharts.js，highcharts.js，jquery.min.js，均与图形模板放在一个目录下即可。
想要详细了解FusionCharts的朋友，可以从其官方下载，里面有个示例，教大家一步步的实现Creating your First Chart~！