使用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~！
<%@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"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%>
<html>
<head>
<title>图形报表示例</title>
<script type="text/javascript" src="<%=basePath%>/jsp/tagpages/FusionCharts/FusionCharts.js"></script>
</head>
<body>
<wx:searchbox/><br/>
<wx:title/><br/>
<div id="chartContainer" style="width:800px; height:300px;"><p> <%=basePath%>/jsp/tagpages/FusionCharts/Column3D.swf</p> 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),"PERSON"); //获取报表中列的值
Object objvalue = ReportAssistant.getInstance().getPropertyValue(lstData.get(i),"MONEY");
String label = objlabel.toString();
String value = objvalue.toString();
set = set+"<set label='"+label+"' value='"+value+"' />";
}
//set = "<set label='斯蒂芬' value='2500.0' /><set label='陈龙' value='100.0' /><set label='陈龙' value='100.0' /><set label='陈龙' value='1000.0' /><set label='沉香' value='120.0' /><set label='沉香' value='250.0' /><set label='林夕' value='1000.0' /><set label='林夕' value='2000.0' /><set label='托尔斯泰' value='1500.0' />";
out.println("<p>----"+set+"</p>");
out.println("---------------");
out.println(graph);
graph += set+"</chart>";
graph = graph.replaceAll("%","");
graph = graph.replaceAll("&"," ");
%>
<%=graph %>
<wx:data/><br/>
<script type="text/javascript">
var myChart = new FusionCharts( "<%=basePath%>/jsp/tagpages/FusionCharts/Column3D.swf","myChartId", "80%", "100%", "0", "1" );
var myData ="<%=graph%>";
myChart.setDataXML(myData);//加载拼装完的xml
myChart.render("chartContainer");
</script>
</body>
</html>
因为FusionCharts本身要运行需要highcharts.js，jquery.min.js这两个脚本，故需要加载到项目中来
你可以去FusionCharts的官方下载个demo，里面有教怎么实现一个最简单的Creating your First Chart~！只是文档是全是英文的，但是不难，很简单的单词及编程单词，我这个英文菜鸟也能照着做出来，呵呵
模板文件就是动态模板啊，可以参看wabacus的动态模板的示例。
因为FusionCharts本身要运行需要highcharts.js，jquery.min.js这两个脚本，故需要加载到项目中来
你可以去FusionCharts的官方下载个demo，里面有教怎么实现一个最简单的Creating your First Chart~！只是文档是全是英文的，但是不难，很简单的单词及编程单词，我这个英文菜鸟也能照着做出来，呵呵
谢谢，我在论坛那边看到你的回复了，后面下载评估版本搞定。
现在发现图表只能显示初始的那些数据，我筛选查询后的结果就没有显示，不知你的会不会这样？
