利用单选按钮切换显示统计图和报表

 

在报表中引入统计图可以让报表展现的数据更直观，但有的时候报表和统计图放在同一个页面上，会使整个页面拉的很长，需要通过设置滚动条才能完整的看到效果。下面介绍一种方法，利用单选按钮在同一个页面来动态切换显示统计图和报表。

实现思路：

制作两张类似的报表模板，一张用来只显示统计图，一张用来只显示报表数据，通过编写jsp来控制统计图和报表的显示切换。

具体实现：

首先设计一张普通的带有统计图的报表，报表名称为testing00.raq,报表模板如下图所示。

其中需要说明的是C4单元格是统计每一地区订单数。

统计图的设置如下图所示：

其中，分类轴定义为：=A3，系列名称为：=”订单数”，系列值为：=C4。

下面设置统计图所在的行隐藏，即勾选属性中”隐藏行”选项，这样这张报表是显示报表不显示统计图，如下图所示。

然后将这张报表另存为testing.raq，将统计图以上各行选定，勾选属性中”隐藏行”选项，这样这张报表只展现统计图而不展现报表，如下图所示。

下面设计展现报表的jsp：

1 展现报表jsp部分

这部分是编写两个标签，用来控制两个报表的显示与否，标签处于<tr>中,id为”aaaa”, reportFileName=” testing.raq”，通过控制aaaa的属性来达到<tr>；同理第2段式用来控制报表testing00.raq的显示或隐藏的效果。

<tr id=”aaaa”>
<td>
<report:html name=”report1″
srcType=”file”
reportFileName=” testing.raq”
funcBarLocation=”top”
generateParamForm=”no”
params=”<%=param%>”
exceptionPage=”/reportJsp/myError2.jsp”
/>
</td></tr>
<tr id=”bbbb” style=”display:none”>
<td>
<report:html name=”report2″
srcType=”file”
reportFileName=”testing00.raq”
funcBarLocation=”top”
generateParamForm=”no”
params=”<%=param%>”
exceptionPage=”/reportJsp/myError2.jsp”
/>
</td></tr>

从上面代码可以看出，两个报表分别处于两个<tr>之中，初始状态是”aaaa”这部分显示,”bbbb”这部分隐藏。

2 设计两个供选择切换的按钮：

设计两个单选按钮，一是图表的单选按钮,类型为radio,点击触发onclick事件show()；统计图的单选按钮设计方法类似。

<tr><td>
<input type=”radio” name=”sf” value=”1″ οnclick=”Show();”>
图表
<input type=”radio” name=”sf” value=”2″ οnclick=”Show2();”>
统计图
</td></tr>

3 设计点击按钮后触发的JavaScript函数：

通过触发JavaScript函数，设置<tr>中的style=”display:none”属性，就可以做到切换显示统计图或和报表数据。

其中，JavaScript函数的写法如下：

<script>
<!– 控制图表的显示与隐藏 –>
function Show(){
if(aaaa.style.display==”"){ //对id为”aaaa”的<tr>进行判断
aaaa.style.display=’none’;} //如果aaaa处于显示中,那么改变状态,将其隐藏
else
aaaa.style.display=”"; //反之,如果aaaa处于隐藏中,那么改变其状态,将其显示,并将bbbb隐藏.
bbbb.style.display=’none’;
}
<!– 控制统计图的显示与隐藏 –>
function Show2(){
if(bbbb.style.display==”"){ //对id为”bbbb”的<tr>进行判断
bbbb.style.display=’none’;} //如果bbbb处于显示中,那么改变状态,将其隐藏
else
bbbb.style.display=”; //反之,如果bbbb处于隐藏中,那么改变其状态,将其显示,并将aaaa隐藏.
aaaa.style.display=’none’;
}
</script>

Jsp设置完成后，看一下在web页面上的展现效果：

当点击图表时，报表数据展现，统计图被隐藏：

当点击统计图时，报表数据被隐藏，展现统计图：

通过这样的方法，就可以使报表数据和统计图很清晰简洁的展现，避免了由于报表展现数据过多，导致统计图不能直观的展现的问题。通过这样的方法，我们还可以把几张相同类型或不同样式的报表，通过单选按钮的选择，展现在同一个jsp上，简单通过点击按钮就达到了报表切换显示的效果。
引自：润乾报表知识库
原文链接：利用单选按钮切换显示统计图和报表
相关文章：Web报表单元格内容竖向显示的实现方法;split函数及其特殊用法；横向分页报表的标题切分

其他相关内容： 润乾 ； 商业智能BI联盟 ;  报表软件 ；Java报表商业智能解决方案web报表的扩展功能