1. 概述
1.1 版本
报表服务器版本 | 支持范围 | App 版本 | 支持功能 |
---|---|---|---|
10.0 | App、H5、Pad | 10.4.61 | 多图表切换支持自定义是否显示切换按钮 |
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