下拉框实现直接联动图表

在普通报表中，使用参数面板控件查询数据，可以很方便的实现图表根据参数联动的效果。但是用户希望可以选择数据后，不用点击查询，图表就可以直接联动出对应数据。

例如：下拉框选择不同的销售员后，图表自动联动出该销售员的数据折线图。效果如下图所示：

1.2 实现思路

给控件添加「编辑后」事件，通过 this.getValue 获取控件 的值，再通过接口 FR.Chart.WebUtils.changeParameter() 改变图表参数并重新请求数据，实现图表在控件编辑后直接联动。

注：FVS 可视化看板中，控件可直接实现自动查询效果，详情可参考文档  FVS下拉框控件。决策报表中，控件在 body 中可直接实现自动查询效果，详情可参见文档 决策报表自动查询。

2.1 准备数据

1）点击设计器左上角「文件>新建普通报表」，选择模板主题为「清爽科技」。

2）新建数据库查询 ds1，SQL 语句为：SELECT * FROM 销量 where 销售员='${销售员}' 。并且设置参数默认值为「孙林」。如下图所示：

2.2 设计图表

2.2.1 插入图表

选中一片单元格区域，点击工具栏「合并单元格」按钮，再点击「插入图表」按钮，插入「折线图」。如下图所示：

2.2.2 绑定数据

选中图表，点击右侧属性面板「单元格元素>数据」，绑定数据如下图所示：

此时我们保存模板，点击「分页预览」，其效果如下图所示，仅显示默认值「孙林」的产品销量。

2.3 设置参数面板

2.3.1 生成参数

1）点击表格上方的  按钮，进入参数面板编辑界面，点击右上角「全部添加」将「销售员」参数添加到参数面板。

2）取消勾选「点击查询前不显示报表内容」，否则不点击查询时，不会显示图表。

2.3.2 设置下拉框控件

参数控件选择「下拉框控件」，绑定数据字典为「销量」表中的「销售员」字段。如下图所示：

此时再次保存预览报表，其效果如下图所示，选择销售员后，需点击「查询」按钮，图表才会变化。

2.4 设置编辑后事件

选中下拉框控件，在右侧属性面板中点击「事件」，添加「编辑后」事件，输入 JavaScript 代码：

FR.Chart.WebUtils.changeParameter({
	chartID:'A1',//图表所在单元格
	para:{ 
		销售员:this.getValue()
	      }
})

步骤如下图所示：

最后删除查询按钮。

2.5 效果预览

保存报表，点击「分页预览」，效果如 1.1 节预期效果所示。

注：不支持移动端。

3.1 单元格控件联动

如果希望控件不添加在参数面板，直接添加在单元格，如下图所示：

控件的数据字典、事件设置方法与参数面板中控件的设置方法完全一致，只需要注意 chartID 需根据图表单元格修改即可。

最后，在单元格中使用控件，需使用「填报预览」，效果如下图所示：

3.2 下拉复选框控件联动

下拉复选框控件与下拉框控件设置数据字典、以及编辑后事件均相同，需要注意的两点是：

1）数据库查询语句需修改为 SELECT * FROM 销量 where 销售员 in ('${销售员}') 。这样图表才能实现多选展示对应的数据。

2）下拉复选框控件的返回值类型为「字符串」，分隔符为 ',' 。如下图所示：

预期效果如下图所示：

已完成模板参见：

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\参数面板下拉框和图表联动.cpt

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\单元格下拉框和图表联动.cpt

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\下拉复选框和图表联动.cpt

点击下载模板：

参数面板下拉框和图表联动.cpt

单元格下拉框和图表联动.cpt

下拉复选框和图表联动.cpt