1. 概述
1.1 版本
| 报表服务器版本 | 功能变动 |
|---|---|
| 11.0 | - |
| 11.0.3 | 新增：图表切换按钮内容/轮播悬浮内容支持自定义文本，不再依赖于图表样式中的标题。详情请参见 1.3.2 节 |
1.2 应用场景
为了实现在同一页面在线切换展示不同图表，我们可以在图表类型处添加多个图表，通过「按钮切换」或「轮播切换」的方式来切换查看不同的图表。预期效果如下图所示：
按钮切换：点击按钮进行切换。
轮播切换：按设置的间隔时间自动轮播。
1.3 功能简介
1.3.1 添加多个图表
在图表类型中，可添加多个图表，且支持复制图表以及移动图表顺序，以及设置图表的切换方式。如下图所示：
点击添加按钮
可添加多个图表，默认名称为「图表2、图表3」依次累加。双击图表名称可重命名。
选中想要复制的图表，点击复制按钮
可复制图表。选中想要移动的图表，点击左移或右移按钮
可移动图表顺序。点击设置按钮
，弹出图表切换属性设置框，可设置切换方式为「按钮」或「轮播」时的各种属性。
1.3.2 图表切换属性
图表切换属性设置框如下图所示：
注：11.0.3 版本及之后的设计器，才支持设置「按钮内容/轮播悬浮内容」。
按钮切换：可设置按钮的背景颜色、显示内容的字体大小等。
轮播切换：可设置轮播箭头显示或隐藏、轮播的间隔时间、轮播箭头或圆点的背景。
按钮内容/轮播悬浮内容：可直接输入文本，同时支持点击 F(x) 按钮输入公式；不支持单独设置按钮内容或轮播悬浮内容，两者共用同样的文本内容。
2. 示例
2.1 打开模板
打开设计器内置模板：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\GraphSwitching\按钮式图表切换.cpt
模板中的 A1 单元格添加了 5 个不同类型的图表，并已经修改各图表名称为各自图表类型。下文将主要介绍多图表的切换属性设置及对应效果，不再赘述图表的添加和设置。
2.2 按钮切换
1）选中图表所在单元格，点击右侧属性面板「单元格元素」，选择「类型」，点击设置按钮，弹出属性设置框。
2）选择切换方式为「按钮」，设置按钮的字体样式和背景。
3）选中每一个图表，分别设置「按钮内容/轮播悬浮内容」文本。例如「地图」的内容为「地域分布」。
如下图所示：
4）预览模板，可以看到：按钮内容由「图表类型图标+按钮内容文本」组成。如下图所示：
注：当按钮内容过多超出显示范围，鼠标悬浮在按钮上时会提示完整文本内容。
2.3 轮播切换
1）选择切换方式为「轮播」，设置轮播箭头为「显示」，时间间隔为 3 秒，背景为灰色。如下图所示：
轮播时间间隔可设置为大于等于 0 的整数，设置为 0 时不自动轮播，可点击箭头或圆点切换图表。
背景为箭头和圆点的背景颜色。
2）这里的「按钮内容/轮播悬浮内容」实际就是 2.2 节设置的文本内容，不区分切换方式。
3）轮播切换时没有按钮标题，需要设置各图表本身的「样式>标题」，勾选「标题可见」，再输入对应的文本内容即可。
4）预览模板可看到图表会定时轮播切换：鼠标点击图表左右的箭头或图表下方的轮播圆点，可即时切换图表。轮播过程中，鼠标进入图表区会停止轮播，移开鼠标后，等待 3 秒（设置的时间间隔）图表继续轮播。
2.4 效果预览
2.4.1 PC 端
保存报表，点击「分页预览」，PC 端效果如 1.2 节所示。
2.4.2 移动端
移动端在不同报表中效果有所不同，详情请参见文档：[通用]移动端多图表切换 。
普通报表轮播切换效果如下图所示：
3. 模板下载
已完成模板可参见：
%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\GraphSwitching\按钮式图表切换.cpt
%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\GraphSwitching\轮播式图表切换.cpt
点击下载模板：
