下拉框和圖表聯動

在製作報表時，使用參數面板元件查詢資料，可以很方便的實現圖表根據參數聯動的效果，但是使用者希望可以選擇資料後，不用點選查詢，圖表就可以直接聯動出對應資料。

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

1.2 實現思路

給元件新增「編輯後」事件，透過 this.getValue 獲取元件 的值，再透過API FR.Chart.WebUtils.changeParameter() 改變圖表參數並重新請求資料，實現圖表在元件編輯後直接聯動。

注：本文方法同樣適用於決策報表。

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）下拉複選框元件的傳回值類型為「字串」，分隔符為 ',' 。如下圖所示：

預期效果如下圖所示：

點選下載範本：

參數面板下拉框和圖表聯動.cpt

儲存格下拉框和圖表聯動.cpt

下拉複選框和圖表聯動.cpt