［通用］移动端多图表切换

1.1 版本

1.2 应用场景

为了提高空间利用率和报表的美观度，报表设计时经常会用到图表切换的功能。

新版本支持自定义是否显示图表切换按钮，用户可以通过该按钮自由切换图表，滑动切换方式仍然支持，且滑动范围放大到整个图表区域。

1.3 功能介绍

图表切换属性页面支持设置两种切换方式，切换效果分别如下图所示：

• 按钮：用户需要滑动图表或者点击按钮进行切换。

• 轮播：图表自动切换，可以自定义轮播间隔时间。可选择是否显示图表切换按钮，自动轮播时点击切换按钮仍然有效。
  

2.1 操作方法

1）在一个图表组件的类型属性页面，点击  ，类似 Tab 块的效果新增多个其他图表，点击  ，打开图表切换属性设置页面。

2）图表切换属性页面的切换方式选择按钮，设置好按钮的样式，点击确定即可。

2.2 效果说明

注1：场景中的手机端同时包含 App 和 H5 。

注1：此处的切换按钮跟轮播切换方式的轮播箭头是同一个按钮，只是说法不同。

注2：图表类型为 FRM 重布局 图表组件时，切换到最后一个图表处，不支持从最后一个切换到第一个图表。其他场景是支持的。

2.3 效果预览

以 FRM 重布局图表组件为例，隐藏切换按钮的效果如下图所示：

2.4 模板下载

已完成模板可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\frm\多图表按钮切换.frm

点击下载模板：多图表按钮切换.frm

3.1 操作方法

1）在一个图表组件的类型属性页面，点击  ，类似 Tab 块的效果新增多个其他图表，点击  ，打开图表切换属性设置页面。

2）图表切换属性页面的切换方式选择轮播，设置是否显示轮播箭头 ( 切换按钮 ) 和轮播时间间隔，点击确定即可。

3.2 效果说明

注：轮播到最后一个图表处，右箭头灰化不可点击，不支持从最后一个切换到第一个图表。

3.3 效果预览

以 FRM 重布局图表组件显示轮播箭头为例，轮播效果如下图所示：

3.4 模板下载

已完成模板可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\frm\多图表轮播切换.frm

点击下载模板：多图表轮播切换.frm