`
lgwt9829
  • 浏览: 17226 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

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

xmlwabacus动态模板图形报表FusionCharts 
阅读更多
项目进入到中后期，迭代需求慢慢浮出，客户想更直观的看到各种分析报表的需求也越来越强烈，在使用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>

运行效果如下：


还可以轻易换成饼状图


了解FusionCharts的朋友可能知道，这个饼是可以动的，呵呵……

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

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

想要详细了解FusionCharts的朋友，可以从其官方下载，里面有个示例，教大家一步步的实现Creating your First Chart~！
  • 大小: 50.8 KB
  • 大小: 44.1 KB
分享到：
评论
9 楼 xiaomimi1991 2015-11-11  
楼主按照你的例子 我的图标显示。但是查询后图表就没有了，我研究了好长时间。你有这种情况吗
8 楼 JTTC 2013-01-07  
我的网站上有很多参考案例以及相关的XML/JSON数据，不过只是针对FusionCharts的，有空看看，可以激发一些灵感 http://juntiansoft.com/demos/business/
7 楼 huzaiping123 2012-07-22  
问下楼主，图表我都显示出来了，但通过查询条件查询后，表格变了，图形就没了，怎样做到图表也能根据查询条件动态变化啊？
我研究了半天也没研究出来，忘大家指点一下
6 楼 Walton4u 2012-05-18  
lgwt9829 写道
Walton4u 写道
请问 最后提到的 highcharts.js，jquery.min.js 在例子中好像没有涉及到？为何说需要它们？

我尝试模仿弄了一下  图没有出来 其他文字都出来了


因为FusionCharts本身要运行需要highcharts.js，jquery.min.js这两个脚本，故需要加载到项目中来

你可以去FusionCharts的官方下载个demo，里面有教怎么实现一个最简单的Creating your First Chart~！只是文档是全是英文的，但是不难，很简单的单词及编程单词，我这个英文菜鸟也能照着做出来，呵呵



谢谢，我在论坛那边看到你的回复了，后面下载评估版本搞定。
现在发现图表只能显示初始的那些数据，我筛选查询后的结果就没有显示，不知你的会不会这样？
5 楼 lgwt9829 2012-05-17  
bushkarl 写道
你好，我安装你说的步骤 还是无法把fusionCharts 整合进去，单独jsp能运行，但是模板文件整到wabacus进是显示不出图表，



模板文件就是动态模板啊，可以参看wabacus的动态模板的示例。
4 楼 lgwt9829 2012-05-17  
Walton4u 写道
请问 最后提到的 highcharts.js，jquery.min.js 在例子中好像没有涉及到？为何说需要它们？

我尝试模仿弄了一下  图没有出来 其他文字都出来了


因为FusionCharts本身要运行需要highcharts.js，jquery.min.js这两个脚本，故需要加载到项目中来

你可以去FusionCharts的官方下载个demo，里面有教怎么实现一个最简单的Creating your First Chart~！只是文档是全是英文的，但是不难，很简单的单词及编程单词，我这个英文菜鸟也能照着做出来，呵呵



3 楼 Walton4u 2012-05-16  
请问 最后提到的 highcharts.js，jquery.min.js 在例子中好像没有涉及到？为何说需要它们？

我尝试模仿弄了一下  图没有出来 其他文字都出来了
2 楼 bushkarl 2012-05-13  
<%@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"%>
<%
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>
1 楼 bushkarl 2012-05-13  
你好，我安装你说的步骤 还是无法把fusionCharts 整合进去，单独jsp能运行，但是模板文件整到wabacus进是显示不出图表，

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics