1. 概述
適用場景：安裝了「FineVis資料視覺化」插件的使用者，可參考本文了解 FVS 範本的相關功能。
1.1 應用場景
當使用者做比較大的資料報表時，遇到報表的資料欄比較多，可以動態選擇需要的欄並查詢對應的值。如下圖所示：
注：使用此方案時，為了使用流暢，建議動態選擇欄和資料量不宜過多，否則會因為效能問題瀏覽不暢。
1.2 實現思路
透過 JS 程式碼實現參數元件的隱藏與顯示，控制查詢條件；透過函式和擴展實現根據查詢條件動態顯示欄資料。
2. 範例
2.1 建立範本
1）在 FineReport 設計器左上角點選「檔案>建立視覺化看板」。
2）在「建立空白看板」Tab 中，可自訂範本名稱和尺寸，選擇 範本樣式 為「內建樣式>深色主題一」。
3）點選「建立看板」。
2.2 準備資料
1）建立資料集 ds1 用來給參數元件綁定選項值來源，SQL 語句為： select * from 銷量
2）建立資料集 ds2 用來拖入儲存格中作為報表資料值，SQL 語句為：
select * from 銷量
where 1=1
${if(len(area) == 0,"","and 地區 = '" +area + "'")}
${if(len(xsy) == 0,"","and 銷售員 = '" +xsy + "'")}
${if(len(cplx) == 0,"","and 產品類型 = '" +cplx + "'")}
${if(len(cp) == 0,"","and 產品 = '" +cp + "'")}
${if(len(xl) == 0,"","and 銷量 = '" +xl + "'")}
${if(len(ywjc) == 0,"","and 英文簡稱 = '" +ywjc + "'")}
如何定義資料集參數可參考：資料集參數
2.3 設計表格組件
1）點選組件區「其他>表格組件」，新增到畫布中，並將其拉動到合適的大小和位置。
2）選中表格組件，點選右側配置區「內容>編輯組件」，進入表格編輯介面。
3）在儲存格 A2、B1、B2 儲存格中輸入公式值，並新增邊框。如下圖所示：
B1：split($col,",")
A2 : ds2.select(#0)
B2 : ds2.value(A2,B1)
4）設定 B1 儲存格為「橫向擴展」，A2儲存格為「縱向擴展」。如下圖所示：
以上便完成表格的設計，預覽時表格內容會跟隨參數值變化。相關簡單範例可參考：使用函式實現動態欄 。
2.4 設計元件組件
2.4.1 新增列元件
1）點選組件區「其他>標題」向畫布中新增標題組件，分別設定「標題組件」的內容、組件名稱，並調整到適當的位置。
以 地區 元件為例，如下圖所示：
2）點選「元件>下拉框」向畫布中新增下拉框元件，分別設定「下拉框元件」的綁定參數、組件名稱，並調整到適當的位置。
以 area 元件為例，如下圖所示：
注：必須保證下拉框元件綁定參數與參數名稱一致。
3）分別為每個「下拉框元件」設定選項值來源。以 area 元件為例，步驟如下圖所示：
2.4.2 新增選擇列的元件
1）點選菜單欄「範本>範本參數」，新增一個範本參數col。如下圖所示：
2）再向畫布中新增一個「標題組件」和「下拉框元件」，點選「元件>查詢按鈕」向畫布中新增查詢按鈕，分別調整到適當的位置。「標題組件」的內容修改為 需要選擇的列 ，「下拉框元件」的綁定參數和組件名稱設定為col。如下圖所示：
3）為 col 「下拉框元件」設定選項值來源。選項值來源類型選擇公式，值為：TABLEDATAFIELDS("ds1")，勾選「開啟多選」。如下圖所示：
4）在查詢按鈕的聯動元件列表中，選中所有元件。如下圖所示：
2.4.3 隱藏列元件
同時選中地區等列元件，點選畫布上方「組合」按鈕，選擇組合即可將這些組件合併成組。將該組合設定為不可見，即初始化時隱藏，後面將透過新增 JS 的方式，根據選擇顯示出來。如下圖所示：
2.5 新增JS事件
1）給 col 「下拉框元件」新增一個「編輯結束」，主要用於控制地區等參數元件的隱藏顯示。如下圖所示：
JavaScript 程式碼如下：
2.6 觸發列元件與表格聯動
value 函式在 FVS 範本中直接使用於元件和表格組件之間時，不會觸發聯動效果，可使用公式$area取值觸發聯動。詳情參見具體文檔： value函式在FVS/決策報表中無聯動效果。
1）選中表格組件，點選右側配置區「內容>編輯組件」，進入表格編輯介面。
2）以列元件的參數 area 為例，在右側任意儲存格插入公式：$area，其餘五個參數操作相同，如下圖所示：
3）選中需要隱藏的列標籤，右擊，在彈出選單中選擇隱藏。如下圖所示：
2.7 效果預覽
2.7.1 PC 端
儲存範本，點選「預覽」，PC 端效果如本文 1.1節所示。
2.7.2 行動端
行動端請自行組合組件並開啟 重佈局 ，預覽方式請參考 FVS行動端預覽 ，效果如下圖所示：
3. 範本下載
點選下載範本：FVS實現動態選擇欄並查詢值.fvs
