js统计图表工具FineReport教程：[10]图表联动

1、问题描述

图表联动：单个模板的图表超链功能，可让用户在同一页面中查看多张关联的图表，实现图表联动的效果，这种联动是自动的，不需重新刷新整个页面，如下图：

2、数据集设计

新建工作簿，添加数据集ds1，SQL语句为：SELECT * FROM Sales_Car；

添加数据集ds2，SQL语句为：SELECT * FROM Sales_Car where month ='${month}'，给参数month设置默认值为1月。

注：这边参数的值将从图表链接处传过来。

3、图表设计

主图表设计

选中一边区域单元格，合并单元格。在菜单栏中，选择插入>单元格元素>插入图表，图表类型选择柱形图，使用数据集数据，设置如下图：

4、单元格子图表设计

再选中一片区域，合并单元格。在菜单栏中，选择插入>单元格元素>插入图表，图表类型选择折线图，图表数据来源于数据集数据，数据集为ds2，分类轴为Province，系列名使用字段值，系列名称为Month，系列值为Amout，汇总方式为求和，如下图：

5、悬浮元素子图表设计

在菜单栏中，选择菜单>悬浮元素>插入图表，选择面积图，图表的数据与单元格子图表设计相同。右击该悬浮图表，点击设置悬浮元素名称修改名称为FloatChart。

6、 图表联动设置

添加单元格联动图表

选中主图表，选择图表属性设置-特效>交互属性，点击超级链接，添加一个图表超链-联动单元格，选择图表所在单元格，并传递参数month，参数值选择分类名：

7、添加悬浮联动图表

在添加一个图表超链-联动悬浮元素，选择悬浮图表FloatChart，同样添加参数month，参数值为分类名。