Web报表控件表单联动实现

在数据展示中，报表与图表常需联动呈现，以体现数据间的关联性。通过FineReport这一Web报表工具，可实现报表与图表的无缝结合，帮助用户更直观、全面地分析和展现数据信息。

1、 启动模板

2、 新增皮肤组件

3、 所示，将饼图组件拖至柱形图左侧即可。

4、 添加新数据集

5、 创建一个新的数据集ds2：从表中选取所有字段，条件为恒真，若产品参数为空则无附加条件，否则增加产品类型等于指定值的筛选条件。

6、 数据绑定组件

7、 饼图

8、 选中饼图组件后，在右侧属性面板的数据选项中进行数据设置，具体操作所示。

9、 柱形图

10、 选中柱形图后，将其数据源更改为新建的ds2数据集，分类轴保持为销售员，系列名称改为产品，系列值仍为销量，具体设置所示。

11、 设置超级链接

12、 点击饼图时，其数据会传递至柱形图，触发柱形图所绑定数据集ds2的参数更新，导致柱形图动态刷新。图表间的联动效果通过数据传递实现，饼图的操作直接影响柱形图的显示内容，体现可视化组件间的交互响应机制。

13、 所示，选中饼图后，在图表属性面板中进入特效-交互属性，添加超级链接。链接方式选择当前表单对象，并指定柱形图组件名称为目标对象，同时添加一个名为product的参数，参数值设为当前系列名称。

14、 若凤脾需链接至当前表单内不同组件，应选用当前表单对象作为超级链接方式。

15、 确认并保存模板。

16、 表单样式设计

17、 在表单右下角的组件列表中选择body主框架，将内边距均设为10，组件间距设为5，具体设置所示。

18、 为表格及两个图表组件分别添加黑色边框。选中表格组件，点击属性栏样式选项后的设置按钮，调整边框样式与颜色，具体操作所示。

19、 用相同方式为其余两个图表组件添加边框。

20、 查看效果

21、 点击预览按钮，在网页端打开模板，点击饼图扇形区域，即可看到如上所示的交互效果。