润乾报表统计图联动刷新

统计图的联动是指统计图之间的数据根据点击图形上的不同区域(例如柱形图中的柱子,饼形图中的图块)来做动态变化.

通常情况下,我们在报表中放入统计图是为了对数据进行展现,那么,我们如何来利用统计图来完成联动功能呢?

首先,我们制作两张带有统计图的报表:

报表一:这张报表的功能是统计货主地区的订单数分布.


报表二:

这张报表的功能在于接收点击报表一传过来的地区参数后,做城市明细订单分布的展现.


由于报表二要接收报表一传过来的参数来对数据进行过滤,所以我们要在报表二中增加参数:


参数X代表的是地区值.

同样我们也要在报表二的数据集中来对参数X进行设置:



接着,我们就要对报表一的联动位置进行设置.我们这里采用的是超链接url传参数:

我们这里以集算器统计图(柱图)为例:


这里的设置是:当点击图形中的柱子,会触发一个自定义的down()方法,并把横纵坐标值当作入参进行传递,参数名分别为@x(横轴)@z(纵轴).

最后,我们写两个页面来把这几张报表进行展现:

主体jsp,里面放两个iframe,每个iframe里放一个报表.

%@ page contentType="text/html;charset=GBK" %>
<%@ taglib uri="/WEB-INF/runqianReport4.tld" prefix="report" %>
<%@ page import="java.io.*"%>
<%@ page import="java.util.*"%>
<%@ page import="com.runqian.report4.usermodel.Context"%>
<html>

<head>
<title>联动demo</title>
</head>

<body>
<%
 request.setCharacterEncoding( "GBK" );
 %>
<div style="height:550px;">
<iframe name="report1" src="showReport.jsp?raq=demoarg2chart.raq" scrolling="auto" frameborder="0"  width=42.5% height=100% style="margin:0px 10px;border:1px solid #DDDDDD"></iframe>
<iframe name="report2" src="showReport.jsp?raq=demoarg2.raq&x=华北" scrolling="auto" frameborder="0"  width=54% height=100% style="border:1px solid #DDDDDD"></iframe></div>
</body>
</html>

然后,在定义一下展现报表一和报表二的jsp,其中要包含前面提到的自定义js函数down():

<%@ page contentType="text/html;charset=GBK" %>
<%@ taglib uri="/WEB-INF/runqianReport4.tld" prefix="report" %>
<%@ page import="java.io.*"%>
<%@ page import="java.util.*"%>
<%@ page import="com.runqian.report4.usermodel.Context"%>

<html>
<body topmargin=0 leftmargin=0 rightmargin=0 bottomMargin=0>
<%
 request.setCharacterEncoding( "GBK" );
 String report = request.getParameter( "raq" );
 String reportFileHome=Context.getInitCtx().getMainDir();
 StringBuffer param=new StringBuffer();
 
 //保证报表名称的完整性
 int iTmp = 0;
 if( (iTmp = report.lastIndexOf(".raq")) <= 0 ){
  report = report + ".raq";
  iTmp = 0;
 }
 
 Enumeration paramNames = request.getParameterNames();
 if(paramNames!=null){
  while(paramNames.hasMoreElements()){
   String paramName = (String) paramNames.nextElement();
   String paramValue=request.getParameter(paramName);
   if(paramValue!=null){
    //把参数拼成name=value;name2=value2;.....的形式
    param.append(paramName).append("=").append(paramValue).append(";");
   }
  }
 }

 //以下代码是检测这个报表是否有相应的参数模板
 String paramFile = report.substring(0,iTmp)+"_arg.raq";
 File f=new File(application.getRealPath(reportFileHome+ File.separator +paramFile));

%>
<jsp:include page="toolbar.jsp" flush="false" />
<table id="rpt" align="center"><tr><td>
<% //如果参数模板存在,则显示参数模板
 if( f.exists() ) {
 %>
 <table id="param_tbl" width="100%" height="100%"><tr><td>
  <report:param name="form1" paramFileName="<%=paramFile%>"
   needSubmit="no"
   params="<%=param.toString()%>"
   
  />
 </td>
 <td><a href="javascript:_submit( form1 )"><img src="../images/query.jpg" border=no style="vertical-align:middle"></a></td>
 </tr>
 </table>
 <% }
%>


<table align="center" width="100%" height="100%">
 <tr><td>
  <report:html name="report1" reportFileName="<%=report%>"
   funcBarLocation="top"
   needPageMark="yes"
   generateParamForm="no"
   params="<%=param.toString()%>"
   needSaveAsExcel="yes"
   needImportExcel="yes"
   exceptionPage="/reportJsp/myError2.jsp"
   generateCellId="yes"
   needSaveAsText="yes"
   width="1000"
  />
 </td>
 </tr>
</table>

<script language="javascript">
 //设置分页显示值
 document.getElementById( "t_page_span" ).innerHTML=report1_getTotalPage();
 document.getElementById( "c_page_span" ).innerHTML=report1_getCurrPage();

 function down(aa,bb){
  parent.report2.location.href="/demo/reportJsp/showReport.jsp?raq=demoarg2.raq&x="+aa;

  }
 </script>
</body>
</html>

其中down()函数的作用就是,把参数传递并刷新页面.

最后我们来看一下页面效果:

点击某一个区域的柱子后,右侧数据进行过滤并展现城市明细数据:



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值