1. 版本编辑
报表设计器版本 | JAR 包 | 扩展图表插件版本 |
---|---|---|
10.0 | 2019-03-01 | V2.2 |
2. 描述编辑
应用场景:当大屏图表(扩展图表插件)播放或刷新至某个点时,触发被联动图表的加载动画或增量刷新,并且使用大屏会有更加酷炫的效果。
功能介绍:动态效果播放时自动触发其他组件数据跟随联动,通过联动对组件进行更为具体的分析。
如下图所示:
3. 准备工作编辑
3.1 插件安装
安装「扩展图表」插件:
3.2 材料准备
确定需求,准备好数据库表、背景图片、边框元素
此文档模板所需的材料请点击下载:
注:文件中的数据表,需使用第三方软件(可点击下载:navicat premium 软件)导入内置 FRDemo 数据库。
3.3 布局排版
根据实际需求,确定轮播的主要信息和对应的轮播形式,以及其他需要的次要信息和展示形式。
1)常见的排版布局请参见 如何制作一个大屏模板(实例)
2)此文档是用轮播目标齿轮联动其余八个组件,因此设计出的布局排版,如下图所示的:
4. 操作步骤编辑
4.1 模板制作
新建一个决策报表,详细步骤请参见 决策报表入门示例 。
4.1.1 新建数据集
新建模板数据集如下:
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}'
4.1.2 组件拖放
1)为了方便数据设置,在拖放组件时可以将组件、拖放顺序、数据集对应起来,如下表所示:
控件名 | 数据集 | 组件形式 |
---|---|---|
chart0 | ds1 | 轮播目标齿轮 |
chart1 | ds2 | 粒子计数器 |
chart2 | ds2 | 水球图 |
chart3 | ds3 | 饼图 |
chart4 | ds4 | 条形图 |
chart5 | ds5 | 词云 |
chart6 | ds6 | 面积图 |
chart7 | ds7 | 雷达图 |
chart8 | ds8 | 柱形图 |
report00 | 报表块 |
2)根据布局排版将所有组件按照上表顺序拖放到对应位置,如下图所示:
4.1.3 组件设置
扩展图表设计请参见 [新]扩展图表 ,其他图表设计请参见 [新]图表 ,报表块设计请参见 单元格样式 。
4.2联动设置
以 chart0 联动 chart1 为例
编辑 chart0 ,选择播放>添加联动>编辑,设置表单对象、联动动画、参数。
表单对象:chart1
联动动画
联动动画 | 动画效果 |
---|---|
重新加载 | 组件整体全部重新加载 |
增量刷新(此模板适用) | 组件在既有的基础上进行叠加刷新 |
参数:
文档设定的参数为 分公司='${c}' ,且 chart1 中设置「节点名称」为「分公司」,此时参数 c 应选择「节点名称」。
如下图所示:
4.3 美化
4.3.1 大屏背景
点击body>样式>填充>选择图片,打开材料准备中的背景图片.png,点击确定,如下图所示:
4.3.2 labe10 背景设置
点击 labe10 设置属性中的样式,选择材料准备>标题背景.png,具体操作请参见上述4.3.1 大屏背景 。
注:图片的主体背景选择「拉伸」。
4.3.2 边框元素
给 chart2-chart8 添加边框元素,以 chart2为例。
1)拖放一个报表块 report4 ,放在 chart2 的位置,并调整控件位置和控件大小,如下图所示:
2)点击 report4 ,选择属性中的样式,图片选择材料准备>边框元素.png,具体操作请参见上述4.3.1 大屏背景。
注:图片的主体背景选择「拉伸」。
3)将 report4 置于底层,如下图所示:
5 预览效果编辑
保存模板,选择分页预览,效果如描述中所示。
注:扩展图表暂时不支持 APP 和 HTML5 的预览。
6. 已完成模板编辑
已完成模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\chart\extend\轮播时自动联动其他组件.frm