项目进入到中后期,迭代需求慢慢浮出,客户想更直观的看到各种分析报表的需求也越来越强烈,在使用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
分享到:
相关推荐
FusionCharts Free V2.1是一款专为网页开发者设计的免费Flash图形报表工具,它能够帮助用户轻松创建出美观、互动且数据丰富的图表。这款软件以其出色的数据可视化能力,为网站和应用程序添加了动态和直观的展示效果...
描述中提到了“FusionCharts”,这是一个广受好评的图形报表工具,具有出色的功能和易用性。 **FusionCharts详解** FusionCharts是一款基于JavaScript的图表库,它支持生成交互式的、丰富的2D和3D图表,广泛应用于...
在博客文章《FusionCharts图形报表展示》中,作者可能分享了如何使用FusionCharts创建一个简单的柱状图实例。首先,他们可能会介绍如何设置HTML结构,然后展示如何配置JavaScript代码来创建图表对象,并将数据源与...
ASP.NET报表设计是Web开发中的一个重要领域,它用于呈现数据以供分析和决策。FusionCharts是一款流行的JavaScript图表库,可以与ASP.NET结合使用,为Web应用提供丰富的交互式图表功能。这款工具允许开发者轻松地将...
总的来说,FusionCharts正式版是开发高质量、互动性强的Web图形报表的理想选择,尤其适合那些需要专业、美观数据展示的项目。其全面的功能、优秀的兼容性和易用性,使得它在IT行业中深受开发者喜爱。
在Java Server Pages (JSP)环境中使用FusionCharts,可以为开发者提供便捷的方式来展示数据,尤其适用于数据分析、报表生成以及数据可视化的需求。 1. **FusionCharts组件介绍** - **核心库**: FusionCharts的核心...
在"完整FusionCharts各种图形报表资源下载"中,我们可以找到FusionCharts支持的各种图表类型及其相关资源。 FusionCharts提供了多种图表类型,包括但不限于: 1. 折线图(Line Charts):用于展示连续性数据的变化...
以下是对FusionCharts报表开发的一些关键知识点: 1. **图表类型**:FusionCharts支持超过90种不同类型的图表,包括线图、柱状图、饼图、仪表盘、地图等,覆盖了数据分析的各个领域,满足各种业务需求。 2. **数据...
这款工具广泛应用于Web应用、仪表板、报表和数据可视化项目中,能够帮助用户将复杂的数据转化为易于理解的图形表示。下面将详细介绍FusionCharts的主要特点、功能以及如何使用。 1. **主要特点** - **丰富的图表...
`FusionCharts_Developer`可能包含的是FusionCharts的开发文档、示例代码和API参考,这些资源对学习和使用FusionCharts非常有帮助。通过深入研究这些资料,开发者可以更好地掌握FusionCharts的各项功能,从而创建出...
FusionCharts是最炫的3D图形工具,全面取代JFreeChar,这里提供了破解版,能生成没有水印的图形报表。 FusionCharts中文开发指南为pdf格式
附件内含本人测试过的代码。绝对是不可多得统计报表...FusionCharts是一个Flash的图表组件,是制作统计报表,图像报表的最牛选择。 基于Flash技术的产品,都非常的漂亮,内置20套左右的Flash统计图。 效果查看如下: ...
**FusionCharts报表图形实例详解** 在现代的Web开发中,数据可视化扮演着至关重要的角色。FusionCharts是一款强大的图表库,它结合了JavaScript和Flash技术,为JAVA Web应用程序提供了丰富的图形解决方案。本实例...
FusionCharts_Professional 免费专业报表FusionCharts_Professional 免费专业报表FusionCharts_Professional 免费专业报表FusionCharts_Professional 免费专业报表
标题中的"FusionCharts flash报表所需完整文件"意味着这个压缩包包含了使用FusionCharts制作Flash报表所需的所有组件和资源。这些文件可能包括: 1. **FusionCharts库**:FusionCharts的核心库文件,如`...
2. **SWF文件**:SWF是Adobe Flash的文件格式,FusionCharts使用这些文件来绘制图表的图形元素。虽然SWF本身是基于Flash技术,但FusionCharts已经处理好了与JavaScript的交互,使得开发者在不直接接触Flash的情况下...
在“FusionCharts+报表工具”的描述中提到,它是“很不错的免费报表生成工具”,这表明该工具不仅功能强大,而且对用户友好,可能提供免费版本供个人或小型项目使用。它特别强调了“flash的动态生成效果”,这意味着...
1. **FusionCharts介绍**:FusionCharts是一款基于Web的图表组件,它使用JavaScript和SVG(可缩放矢量图形)技术来生成2D和3D图表。这款工具支持多种图表类型,如柱状图、线图、饼图、地图等,适用于各种数据分析和...