下拉框和圖表聯動

某些填報場景下，希望下拉框選擇參數後，圖表可以跟随該參數聯動。

例如：下拉框選擇不同的銷售員後，圖表自動聯動出該銷售員的數據折線圖。效果如下圖所示：

1.2 實現思路

以超級鏈接中圖表聯動爲依據，通過下拉框編輯後事件控制單元格值，可以通過設置一個單元格的超鏈接來聯動圖表，再模拟點擊此超鏈接，即可實現聯動，

需要用到函數contentPane.setValue()，jQuery 中對象點擊事件，以及填報中動态設置值與獲取值的一個小技巧。

2.1 準備數據

1）新建普通報表，添加數據集 ds1，SQL 語句爲：select distinct 銷售員 from 銷量

2）添加數據集 ds2，SQL 語句爲：SELECT * FROM 銷量 where 銷售員='${銷售員}'

注：銷售員參數要設置一個默認值，否則在填報預覽時不會呈現出效果預覽的圖示，示例中設置銷售員默認值爲張珊。

2.2 設計表格

1）B1 單元格寫入文本信息銷售員，C1 單元格添加下拉框控件，合并一片單元格，插入折線圖，如下圖所示：

2.3 設置填報頁面

菜單欄選擇模板>模板 Web 屬性>填報頁面設置，勾選直接顯示控件，使填報預覽時直接顯示控件類型：

2.4 設置數據字典

選中 C1 單元格，右邊屬性面板選擇控件設置>屬性，下拉框數據字典的實際值和顯示值都綁定爲銷售員，如下圖所示：

2.5 添加編輯後事件

選中 C1 單元格，右邊屬性面板選擇控件設置>事件，添加編輯後事件，如下圖所示：

JavaScript 代碼如下：

//将當前選擇的銷售員設置進D1單元格
contentPane.setCellValue('D1',null,this.getValue());
//點擊D1單元格中的超鏈接
$('td[id^=D1] .linkspan').click();

2.6 設計折線圖

1）選中折線圖所在 B3 單元格，如下圖綁定圖表數據：

2）将折線圖的标題設置爲：銷量情況統計表。

2.7 設置聯動

1）選中 D1 單元格，添加一個聯動單元格類型的超級鏈接，設置聯動的單元格爲折線圖所在的 B3 單元格，新增一個參數銷售員，值爲 D1 單元格，如下圖所示：

注：此處聯動的銷售員必須是單元格号，不能用公式=$$$，否則取不到用 JS 動态設置到此單元格的值。

2）爲了前端展示時隐藏 D1 單元格的值，選中 D1 單元格，右邊屬性面板選擇單元格屬性>形态，設置公式形态爲公式''，如下圖所示：

2.8 效果預覽

保存模板，點擊填報預覽，效果如下：

注：不支持移動端。

已完成模板參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\SpecialSubject\HyplinkReport\下拉框和圖表聯動.cpt

點擊下載模板：下拉框和圖表聯動.cpt