利用单选按钮切换统计图和报表
在报表中引入统计图可以让报表展现的数据更直观的表现出来，但有的时候报表和统计图放在同一个页面上，会使整个页面拉的很长，需要通过设置滚动条才能完整的看到效果，下面介绍一种方法，利用单选按钮在同一个页面来切换统计图和报表的显示, 用此方法就可以避免报表和统计图过长的现象了。
实现思路：
1制作两张一模一样的报表，一张用来只显示统计图，一张用来只显示报表数据。
2写一个jsp，用来展现报表和统计图，在里面设计两个单选按钮，通过控制统计图和报表的显示来达到效果。
具体实现：
第一步：来制作一张普通的带有统计图的报表。（这里使用的数据来自快逸demo中的”雇员”表）。
按照上图所示，设计好报表的表达式和样式。
其中，各个单元格的表达式如下：
A3:=ds1.Group(职务,false)
B3:=ds1.Select(雇员ID)
C3:=ds1.姓氏+ds1.名字
D3:=ds1.尊称
E3:=left(ds1.出生日期,10)（关于left()函数的用法，请参考快逸用户手册中的相关介绍）
C4:=count(B3{})
统计图的设置如下图所示：
其中，分类轴定义为：=A3
系列名称为：=”雇员数”
系列值为：=C4
我们把统计图所在的行隐藏掉：
我们把这张报表存为demo.raq.这样，只展现报表而不展现统计图的报表就制作完成了。
接下来我们只需要做一个小小的改动，把刚才设置的隐藏行属性去掉，然后选中统计图以上的数据行，然后勾选隐藏行，这样，这张报表就只显示统计图而不显示报表数据了，我们另存为demo_t.raq.
到此，报表模版就制作完成了。
第二步：设计一下展现报表的jsp：
一.展现报表jsp部分
<!- 只展现报表数据的报表标签部分 ->
<!- 这部分标签处于<tr>中,id为”aaaa”,通过控制aaaa的属性来达到<tr>显示或隐藏的效果 ->
<tr id=”aaaa”>
<td>
<report:html name=”report1″
srcType=”file”
reportFileName=”demo.raq”
funcBarLocation=”top”
generateParamForm=”no”
params=”<%=param%>”
exceptionPage=”/reportJsp/myError2.jsp”
/>
</td></tr>
<!- 只展现报表统计图的报表标签部分 ->
<!- 这部分标签处于<tr>中,id为”bbbb”,通过控制bbbb的属性来达到<tr>显示或隐藏的效果 ->
<tr id=”bbbb” style=”display:none”>
<td>
<report:html name=”report2″
srcType=”file”
reportFileName=”demo_t.raq”
funcBarLocation=”top”
generateParamForm=”no”
params=”<%=param%>”
exceptionPage=”/reportJsp/myError2.jsp”
/>
</td>
</tr>
从上面代码可以看出，两个报表分别处于两个<tr>之中，初始状态是”aaaa”这部分显示,”bbbb”这部分隐藏。
二.设计两个供选择切换的按钮：
<tr>
<td>
<!- 图表的单选按钮,类型为radio,点击触发onclick事件show() ->
<input type=”radio” name=”sf” value=”1″ onclick=”Show();”>
图表
<!-统计图的单选按钮,类型为radio,点击触发onclick事件show2() ->
<input type=”radio” name=”sf” value=”2″ onclick=”Show2();”>
统计图
</td>
</tr>
三.设计点击按钮后触发的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上，简简单单通过点击按钮就达到了切换报表的效果。