1. 概述
1.1 预期效果
在普通报表中，使用参数面板控件查询数据，可以很方便的实现图表根据参数联动的效果。但是用户希望可以选择数据后，不用点击查询，图表就可以直接联动出对应数据。
例如：下拉框选择不同的销售员后，图表自动联动出该销售员的数据折线图。效果如下图所示：
1.2 实现思路
给控件添加「编辑后」事件，通过 this.getValue 获取控件 的值，再通过接口 FR.Chart.WebUtils.changeParameter() 改变图表参数并重新请求数据，实现图表在控件编辑后直接联动。
注：FVS 可视化看板中，控件可直接实现自动查询效果，详情可参考文档 FVS下拉框控件。决策报表中，控件在 body 中可直接实现自动查询效果，详情可参见文档 决策报表自动查询。
2. 示例
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. 示例扩展
3.1 单元格控件联动
如果希望控件不添加在参数面板，直接添加在单元格，如下图所示：
控件的数据字典、事件设置方法与参数面板中控件的设置方法完全一致，只需要注意 chartID 需根据图表单元格修改即可。
最后，在单元格中使用控件，需使用「填报预览」，效果如下图所示：
3.2 下拉复选框控件联动
下拉复选框控件与下拉框控件设置数据字典、以及编辑后事件均相同，需要注意的两点是：
1）数据库查询语句需修改为 SELECT * FROM 销量 where 销售员 in ('${销售员}') 。这样图表才能实现多选展示对应的数据。
2）下拉复选框控件的返回值类型为「字符串」，分隔符为 ',' 。如下图所示：
预期效果如下图所示：
4. 模板下载
已完成模板参见：
%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
点击下载模板：
