`
lgwt9829
  • 浏览: 17941 次
  • 性别: 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进是显示不出图表，

发表评论

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

相关推荐

    免费漂亮的Flash图形报表-FusionCharts Free V2.1

    FusionCharts Free V2.1是一款专为网页开发者设计的免费Flash图形报表工具，它能够帮助用户轻松创建出美观、互动且数据丰富的图表。这款软件以其出色的数据可视化能力，为网站和应用程序添加了动态和直观的展示效果...

    免费并且很好用的图形报表工具

    描述中提到了“FusionCharts”，这是一个广受好评的图形报表工具，具有出色的功能和易用性。 **FusionCharts详解** FusionCharts是一款基于JavaScript的图表库，它支持生成交互式的、丰富的2D和3D图表，广泛应用于...

    FusionCharts 图形报表展示

    在博客文章《FusionCharts图形报表展示》中，作者可能分享了如何使用FusionCharts创建一个简单的柱状图实例。首先，他们可能会介绍如何设置HTML结构，然后展示如何配置JavaScript代码来创建图表对象，并将数据源与...

    asp.net报表FusionCharts资料文档

    ASP.NET报表设计是Web开发中的一个重要领域，它用于呈现数据以供分析和决策。FusionCharts是一款流行的JavaScript图表库，可以与ASP.NET结合使用，为Web应用提供丰富的交互式图表功能。这款工具允许开发者轻松地将...

    FusionCharts图形报表工具正式版

    总的来说，FusionCharts正式版是开发高质量、互动性强的Web图形报表的理想选择，尤其适合那些需要专业、美观数据展示的项目。其全面的功能、优秀的兼容性和易用性，使得它在IT行业中深受开发者喜爱。

    JSP下操作图形控件FusionCharts

    在Java Server Pages (JSP)环境中使用FusionCharts，可以为开发者提供便捷的方式来展示数据，尤其适用于数据分析、报表生成以及数据可视化的需求。 1. **FusionCharts组件介绍** - **核心库**: FusionCharts的核心...

    完整FusionCharts各种图形报表资源下载

    在"完整FusionCharts各种图形报表资源下载"中，我们可以找到FusionCharts支持的各种图表类型及其相关资源。 FusionCharts提供了多种图表类型，包括但不限于： 1. 折线图（Line Charts）：用于展示连续性数据的变化...

    Fusioncharts 报表

    以下是对FusionCharts报表开发的一些关键知识点： 1. **图表类型**：FusionCharts支持超过90种不同类型的图表，包括线图、柱状图、饼图、仪表盘、地图等，覆盖了数据分析的各个领域，满足各种业务需求。 2. **数据...

    图形工具fusioncharts及使用手册

    这款工具广泛应用于Web应用、仪表板、报表和数据可视化项目中，能够帮助用户将复杂的数据转化为易于理解的图形表示。下面将详细介绍FusionCharts的主要特点、功能以及如何使用。 1. **主要特点** - **丰富的图表...

    通过配置xml制作报表FusionCharts

    `FusionCharts_Developer`可能包含的是FusionCharts的开发文档、示例代码和API参考，这些资源对学习和使用FusionCharts非常有帮助。通过深入研究这些资料，开发者可以更好地掌握FusionCharts的各项功能，从而创建出...

    FusionCharts中文开发指南+FusionCharts破解版

    FusionCharts是最炫的3D图形工具，全面取代JFreeChar，这里提供了破解版，能生成没有水印的图形报表。 FusionCharts中文开发指南为pdf格式

    最牛的统计报表 FusionCharts

    附件内含本人测试过的代码。绝对是不可多得统计报表...FusionCharts是一个Flash的图表组件，是制作统计报表，图像报表的最牛选择。 基于Flash技术的产品，都非常的漂亮，内置20套左右的Flash统计图。 效果查看如下： ...

    FusionCharts报表 图形实例

    **FusionCharts报表图形实例详解** 在现代的Web开发中，数据可视化扮演着至关重要的角色。FusionCharts是一款强大的图表库，它结合了JavaScript和Flash技术，为JAVA Web应用程序提供了丰富的图形解决方案。本实例...

    FusionCharts_Professional 免费专业报表

    FusionCharts_Professional 免费专业报表FusionCharts_Professional 免费专业报表FusionCharts_Professional 免费专业报表FusionCharts_Professional 免费专业报表

    FusionCharts flash报表所需完整文件

    标题中的"FusionCharts flash报表所需完整文件"意味着这个压缩包包含了使用FusionCharts制作Flash报表所需的所有组件和资源。这些文件可能包括： 1. **FusionCharts库**：FusionCharts的核心库文件，如`...

    FusionCharts报表工具及例子

    2. **SWF文件**：SWF是Adobe Flash的文件格式，FusionCharts使用这些文件来绘制图表的图形元素。虽然SWF本身是基于Flash技术，但FusionCharts已经处理好了与JavaScript的交互，使得开发者在不直接接触Flash的情况下...

    fusioncharts+报表工具（文档）

    在“FusionCharts+报表工具”的描述中提到，它是“很不错的免费报表生成工具”，这表明该工具不仅功能强大，而且对用户友好，可能提供免费版本供个人或小型项目使用。它特别强调了“flash的动态生成效果”，这意味着...

    FusionCharts 文档和实例

    1. **FusionCharts介绍**：FusionCharts是一款基于Web的图表组件，它使用JavaScript和SVG（可缩放矢量图形）技术来生成2D和3D图表。这款工具支持多种图表类型，如柱状图、线图、饼图、地图等，适用于各种数据分析和...

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