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

 时间:2024-11-01 07:47:24

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

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

2、数据集设计新建工作簿,添加数据集ds1,SQL语句为:SELECT * FROM Sales_Car;添加数据集ds2,SQL语句为:SELECT * FROM Sales_Car where month ='${month}',给参数month设置默认值为1月。注:这边参数的值将从图表链接处传过来。

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

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

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

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

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

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

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

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

js统计图表工具FineReport教程:[10]图表联动
  • js统计图表工具FineReport如何制作三维图表
  • js统计图表工具FineReport教程:[14]气泡图
  • js统计图表工具FineReport教程:[13]系列拖曳
  • js统计图表工具FineReport如何设置图表缩放
  • js统计图表工具FineReport教程:[15]地址定位
  • 热门搜索
    我爱诗歌手抄报 家乡手抄报 禁燃烟花爆竹手抄报 安全健康手抄报 珍惜时间手抄报 我爱我家手抄报内容 爱国的手抄报图片 读书手抄报的资料 反腐倡廉手抄报内容 我的一本课外书手抄报