1. 概述
1.1 版本
| 报表设计器版本 | JAR 包 | 扩展图表插件版本 |
|---|---|---|
| 10.0 | 2019-03-01 | V2.2 |
1.2 应用场景
当大屏图表（扩展图表插件）播放或刷新至某个点时，触发被联动图表的加载动画或增量刷新，并且使用大屏会有更加酷炫的效果。
1.3 功能简介
动态效果播放时自动触发其他组件数据跟随联动，通过联动对组件进行更为具体的分析。
如下图所示：
2. 准备工作
2.1 数据准备
准备需要的数据表，将数据表导入内置 FRDemo 数据库：数据表.rar
注：详情请参见使用第三方软件迁移内置FRDemo数据库到指定数据库
2.2 布局排版
根据实际需求，确定轮播的主要信息和对应的轮播形式，以及其他需要的次要信息和展示形式。
本文示例是用轮播目标齿轮联动其余八个组件，因此设计出的布局排版，如下图所示：
注：常见的排版布局请参见：如何制作一个大屏模板（实例）
2.3 美化材料准备
准备报表块、大屏背景图片：
3. 操作步骤
3.1 插件安装
安装「扩展图表」插件。
注：详情请参见扩展图表插件
3.2 新建模板
新建一个决策报表，存储为%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\chart\extend\轮播时自动联动其他组件.frm
注：详情请参见决策报表入门示例
3.2.1 设置自适应属性
点击菜单模板>表单报表块自适应属性，取消勾选使用全局配置，选择字体不自适应、表格双向自适应，如下图所示：
注：详情请参见自适应属性
3.2.2 设置布局方式
选中 body，选择属性，设置布局方式为绝对布局、缩放逻辑为适应区域。如下图所示：
注：详情请参见决策报表布局方式
3.3 新建数据集
新建模板数据集，如下表所示：
| 数据集 | SQL 语句 |
|---|---|
| ds1 | SELECT * FROM 总公司面板 |
| ds2 | SELECT * FROM 总公司面板 WHERE 分公司='${c}' |
| ds3 | SELECT * FROM 总公司品牌 WHERE 分公司='${c}' |
| ds4 | SELECT * FROM 总公司车系 WHERE 公司='${c}' ORDER BY 销量 |
| ds5 | SELECT * FROM 总公司员工 WHERE 公司='${c}' |
| ds6 | SELECT * FROM 总公司月份 WHERE 分公司='${c}' |
| ds7 | SELECT * FROM 总公司影响因素 WHERE 分公司='${c}' |
| ds8 | SELECT * FROM 总公司销售分析 WHERE 分公司='${c}' |
3.4 设计报表
3.4.1 组件拖放
1）为了方便数据设置，在拖放组件时可以将组件、拖放顺序、数据集对应起来，如下表所示：
| 控件名 | 数据集 | 组件形式 |
|---|---|---|
| chart0 | ds1 | 轮播目标齿轮 |
| chart1 | ds2 | 粒子计数器 |
| chart2 | ds2 | 水球图 |
| chart3 | ds3 | 饼图 |
| chart4 | ds4 | 条形图 |
| chart5 | ds5 | 词云 |
| chart6 | ds6 | 面积图 |
| chart7 | ds7 | 雷达图 |
| chart8 | ds8 | 柱形图 |
| report00 | - | 报表块 |
| report10 | - | 报表块 |
2）根据布局排版将所有组件按照上表顺序拖放到对应位置，如下图所示：
3.4.2 组件设置
扩展图表设计请参见 [新]扩展图表 ，其他图表设计请参见 [新]图表 ，报表块设计请参见 单元格样式 。
3.5 设置联动
以 chart0 联动 chart1 为例。
编辑 chart0 ，选择播放>添加联动>编辑，设置表单对象、联动动画、参数。
表单对象：chart1
联动动画：
| 联动动画 | 动画效果 |
|---|---|
| 重新加载 | 组件整体全部重新加载 |
| 增量刷新 | 组件在既有的基础上进行叠加更新 |
参数：
文档设定的参数为 分公司='${c}' ，且 chart1 中设置「节点名称」为「分公司」，此时参数 c 应选择「节点名称」。
如下图所示：
3.6 美化
3.6.1 设置大屏背景
选中body，点击属性>样式，设置填充图片，打开背景图片.png，设置图片格式为拉伸，如下图所示：
3.6.2 设置标题背景
选中报表块report10，点击属性>样式，设置填充图片，打开标题背景.png，设置图片格式为拉伸，如下图所示：
3.6.3 设置图表块边框
给图表块chart2~chart8设置边框，以 chart2 为例。
选中图表块chart2，点击属性>样式，设置填充图片，打开标题背景.png，设置图片格式为拉伸，如下图所示：
3.7 预览效果
保存模板，选择分页预览，效果如1.3 功能简介中所示。
注1：扩展图表不支持移动端预览。
注2：扩展图表仅支持 Chrome 浏览器。
4. 已完成模板
已完成模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\chart\extend\轮播时自动联动其他组件.frm
点击下载模板：轮播时自动联动其他组件.frm
点击下载数据表：数据表.rar
点击下载背景边框图片：背景边框图片.rar