图表切换属性

1.1 版本

1.2 应用场景

为了实现在同一页面在线切换展示不同图表，我们可以在图表类型处添加多个图表，通过「按钮切换」或「轮播切换」的方式来切换查看不同的图表。预期效果如下图所示：

按钮切换：点击标题进行切换。

轮播切换：按设置的间隔时间自动轮播。

1.3 功能简介

在图表类型中，可添加多个图表，设置图表的切换方式。10.0.18 及之后的版本中，还支持复制图表以及移动图表顺序。如下图所示：

• 点击添加按钮  可添加多个图表，默认名称为「图表2、图表3」依次累加，双击图表名称可重命名。

• 选中想要复制的图表，点击复制按钮  可复制图表。

• 选中想要移动的图表，点击左移或右移按钮  可移动图表顺序。

• 点击设置按钮  ，弹出图表切换属性设置框，可设置切换方式为「按钮」或「轮播」。如下图所示：

注：图表切换只针对设置的图表 index 生效。如只设置了第二个图表自动刷新，则只有第二个图表执行刷新操作。

2.1 打开模板

本文主要介绍图表的切换方式，此处不赘述图表的添加和设置，直接打开模板：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\GraphSwitching\按钮式图表切换.cpt

2.2 按钮切换

1）在右侧选择类型，点击设置按钮，选择切换方式为「按钮」，同时设置按钮的字体样式和背景，如下图所示：

2）按钮上的文字内容即各图表的标题，我们需要给每个图表设置标题，设置标题后可再将「标题可见」取消勾选。如下图所示：

3）预览模板时可看到：按钮内容由「图表类型图标+图表标题」组成。如下图所示：

注：当按钮内容过多超出显示范围，鼠标悬浮在按钮上时会提示完整文字内容。

2.3 轮播切换

1）在右侧选择类型，点击设置按钮，选择切换方式为「轮播」，设置轮播箭头为「隐藏」，时间间隔为 3 秒，轮播背景为灰色。如下图所示：

• 轮播时间间隔可设置为大于等于 0 的整数，设置为 0 时不自动轮播，可点击箭头或圆点切换图表。

• 背景为箭头和圆点的背景颜色。

2）设置各图表的标题，勾选「标题可见」。

3）预览模板可看到图表会定时轮播切换：鼠标点击图表左右的箭头或图表下方的轮播圆点，可即时切换图表。轮播过程中，鼠标进入图表区会停止轮播，移开鼠标后，等待 3 秒（设置的时间间隔）图表继续轮播。

2.4 效果预览

2.4.1 PC 端

保存报表，点击「分页预览」，PC 端效果如 1.1 节所示。

2.4.2 移动端

移动端在不同报表中效果有所不同，详情请参见文档：[通用]移动端多图表切换 。

普通报表轮播切换效果如下图所示：

已完成模板可参见：

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\GraphSwitching\按钮式图表切换.cpt

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\GraphSwitching\轮播式图表切换.cpt

点击下载模板：

按钮式图表切换.cpt

轮播式图表切换.cpt