1、问题描述图表联动:单个模板的图表超链功能,可让用户在同一页面中查看多张关联的图表,实现图表联动的效果,这种联动是自动的,不需重新刷新整个页面,如下图:
![web报表开发工具FineReport教程:[8]图表联动](https://exp-picture.cdn.bcebos.com/b442d6d246fe474ea556230bb0ef354f51b81f69.jpg)
2、数据集设计新建工作簿,添加数据集ds1,SQL语句为:SELECT * FROM Sales_Car;添加数据集ds2,SQL语句为:SELECT * FROM Sales_Car where month ='${month}',给参数month设置默认值为1月。注:这边参数的值将从图表链接处传过来。
3、图表设计主图表设计选中一边区域单元格,合并单元格。在菜单栏中,选择插入>单元格元素>插入图表,图表类型选择柱形图,使用数据集数据,设置如下图:
![web报表开发工具FineReport教程:[8]图表联动](https://exp-picture.cdn.bcebos.com/340e4eb8b43ea8db399fea86189c2cf7deb21669.jpg)
4、单元格子图表设计再选中一片区域,合并单元格。在菜单栏中,选择插入>单元格元素>插入图表,图表类型选择折线图,图表数据来源于数据集数据,数据集为ds2,分类轴为Province,系列名使用字段值,系列名称为Month,系列值为Amout,汇总方式为求和,如下图:
![web报表开发工具FineReport教程:[8]图表联动](https://exp-picture.cdn.bcebos.com/2db6c1b2dc19ce2c2ece0e6a7fdca039121f1169.jpg)
5、悬浮元素子图表设计在菜单栏中,选择菜单>悬浮元素>插入图表,选择面积图,图表的数据与单元格子图表设计相同。右击该悬浮图表,点击设置悬浮元素名称修改名称为FloatChart。
6、图表联动设置添加单元格联动图表选中主图表,选择图表属性设置-特效>交互属性,点击超级链接,添加一个图表超链-联动单元格,选择图表所在单元格,并传递参数month,参数值选择分类名:
![web报表开发工具FineReport教程:[8]图表联动](https://exp-picture.cdn.bcebos.com/a1780d1fceecd3d915a0e2706799594305010869.jpg)
7、添加悬浮联动图表在添加一个图表超链-联动悬浮元素,选择悬浮图表FloatChart,同样添加参数month,参数值为分类名。
![web报表开发工具FineReport教程:[8]图表联动](https://exp-picture.cdn.bcebos.com/edd84743040148fe9c974ddf8fd149299b880269.jpg)