1. 概述
1.1 版本
| 报表服务器版本 | 支持范围 | App 版本 |
|---|---|---|
| 11.0 | App、H5、Pad | V11.0 |
1.2 应用场景
为了提高空间利用率和报表的美观度，报表设计时经常会用到图表切换的功能。
新版本支持自定义是否显示图表切换按钮，用户可以通过该按钮自由切换图表，滑动切换方式仍然支持，且滑动范围放大到整个图表区域。
1.3 功能介绍
「图表切换属性」页面支持设置两种切换方式，切换效果分别如下图所示：
按钮：用户需要滑动图表或者点击按钮进行切换。
轮播：图表自动切换，可以自定义轮播间隔时间。可选择是否显示图表切换按钮，自动轮播时点击切换按钮仍然有效。
2. 按钮
2.1 操作方法
1）在一个图表组件的类型属性页面，点击 ，类似 Tab 块的效果新增多个其他图表，点击 ，打开图表切换属性设置页面。
2）图表切换属性页面的切换方式选择「按钮」，设置好按钮的样式，点击确定即可。
2.2 效果说明
| 场景 | 图表类型 | 效果 |
|---|---|---|
| 手机端 | CPT 单元格图表 | 显示左右切换按钮 |
| FRM 重布局 图表组件 | 隐藏左右切换按钮 | |
| FRM 重布局 报表块图表 | 显示左右切换按钮 | |
| FRM 保留布局 图表组件/报表块图表 | 显示左右切换按钮 | |
| Pad 端 | CPT 单元格图表、FRM 保留布局 图表组件/报表块图表 | 显示左右切换按钮 |
注1：场景中的手机端同时包含 App 和 H5 。
注1：此处的切换按钮跟轮播切换方式的轮播箭头是同一个按钮，只是说法不同。
注2：图表类型为 FRM 重布局 图表组件时，切换到最后一个图表处，不支持从最后一个切换到第一个图表。其他场景是支持的。
2.3 效果预览
以 FRM 重布局图表组件为例，隐藏切换按钮的效果如下图所示：
2.4 模板下载
已完成模板可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\frm\多图表按钮切换.frm
点击下载模板：多图表按钮切换.frm
3. 轮播
3.1 操作方法
1）在一个图表组件的类型属性页面，点击 ，类似 Tab 块的效果新增多个其他图表，点击 ，打开图表切换属性设置页面。
2）图表切换属性页面的切换方式选择「轮播」，设置是否显示轮播箭头 ( 切换按钮 ) 和轮播时间间隔，点击确定即可。
3.2 效果说明
| 轮播箭头设置 | 场景 | 图表类型 | 效果 |
|---|---|---|---|
| 显示 | 手机端 | CPT 单元格图表 | 显示左右轮播箭头 |
| FRM 重布局 图表组件/报表块图表 | 显示左右轮播箭头 | ||
| FRM 保留布 局图表组件/报表块图表 | 显示左右轮播箭头 | ||
| Pad 端 | 所有图表 | 显示左右轮播箭头 | |
| 隐藏 | 手机端 | CPT 单元格图表 | 显示左右轮播箭头 |
| FRM 重布局 图表组件 | 隐藏左右轮播箭头，支持滑动切换，图表内部滑动不响应 | ||
| FRM 重布局 报表块图表 | 显示左右轮播箭头 | ||
| FRM 保留布 局图表组件/报表块图表 | 显示左右轮播箭头 | ||
| Pad 端 | CPT 单元格图表、FRM 保留布 局图表组件/报表块图表 | 显示左右轮播箭头 |
注：轮播到最后一个图表处，右箭头灰化不可点击，不支持从最后一个切换到第一个图表。
3.3 效果预览
以 FRM 重布局图表组件显示轮播箭头为例，轮播效果如下图所示：
3.4 模板下载
已完成模板可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\frm\多图表轮播切换.frm
点击下载模板：多图表轮播切换.frm
上一篇：[通用]折叠展开样式
