使用wabacus框架开发图形报表—FusionCharts

最新推荐文章于 2019-01-28 10:44:48 发布

lgwt9829

最新推荐文章于 2019-01-28 10:44:48 发布

阅读量298

点赞数

分类专栏： wabacus 文章标签： xml wabacus 动态模板图形报表 FusionCharts

本文链接：https://blog.csdn.net/lgwt9829/article/details/84175255

版权

wabacus 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

项目进入到中后期，迭代需求慢慢浮出，客户想更直观的看到各种分析报表的需求也越来越强烈，在使用wabacus开发完毕相关业务表单的数据编辑后，图形化报表进入项目的切实开发阶段，因wabacus作为国内新兴的开发快速平台，其开发效率非常可观，而且又开放了诸多接口方便在此上面进行一些特殊功能开发，故特此研究了一下关于图形报表的开发使用，在此，我们选用FusionCharts作为图形控件，数据组织成xml格式（也可以组织成json）。下面是做的一个的例子，供大家参看交流。

第一步：先开发完标准的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>

运行效果如下：

[img]http://dl.iteye.com/upload/attachment/0065/4794/311510b1-aac4-3f26-9d7a-a1d5d60e0a00.jpg[/img]
还可以轻易换成饼状图

[img]http://dl.iteye.com/upload/attachment/0065/4796/b0eb2594-ea7f-3246-a9c5-1ff88623c56b.jpg[/img]
了解FusionCharts的朋友可能知道，这个饼是可以动的，呵呵……

要刚换成此种效果，只需要更换动态模板中引用的图形模型即可，即jsp示例代码中37行最后的“Column3D.swf”更换为“Pie3D.swf”。

当然，要运行起图形来还需要一些其他的文件,三个脚本：FusionCharts.js，highcharts.js，jquery.min.js，均与图形模板放在一个目录下即可。

想要详细了解FusionCharts的朋友，可以从其官方下载，里面有个示例，教大家一步步的实现Creating your First Chart~！