1. 概述
適用場景：安裝了「FineVis資料視覺化」插件的使用者，可參考本文了解 FVS 範本的相關功能。
1.1 版本
| 報表伺服器版本 | 插件版本 |
|---|---|
| 11.0.6 | V1.5.0 |
1.2 應用場景
在使用參數元件時，有時我們希望部分參數元件在不滿足條件時不顯示，滿足條件後再顯示。
例如報表類型選擇年報時，只顯示年份元件；選擇月報時，再顯示出月份元件；選擇日報時，則只顯示日期時間元件。
如下圖所示：
1.3 實現思路
透過 JS 來控制元件組件的可見與不可見：
setVisible(boolean)：設定是否可見，true 為可見，false 為不可見
該API對 FVS 所有組件有效，詳細API可參見：元件通用 。
2. 範例
2.1 建立範本
1）在 FineReport 設計器左上角點選「檔案>建立視覺化看板」。
2）在「建立空白看板」Tab 中，可自訂範本名稱和尺寸，選擇 範本樣式 為「內建樣式>淺色主題一」。
3）點選「建立看板」。
2.2 準備資料
建立資料庫查詢 ds1 ，輸入 SQL 查詢語句：
SELECT * FROM 訂單 where 1=1 ${if(type=="日報"," and date(訂購日期)='"+ date +"'",
if(type=="月報"," and strftime('%m',訂單.訂購日期)='"+ month+"'"+" and strftime('%Y',訂單.
訂購日期)='"+ year+"'"," and strftime('%Y',訂單.訂購日期)='"+ year+"'"))}
這段 SQL 表示根據變數 type 的不同值（"日報"、"月報"或其他）生成不同的條件來篩選訂單資料，條件包括日期、月份和年份。
2.3 設計表格組件
1）點選組件區「文字>表格組件」，新增到畫布中，並將其拉動到合適的大小和位置。
2）選中表格組件，點選右側配置區「內容>編輯組件」，進入表格編輯介面。
3）表格主體設計如下圖所示，將 ds1 資料集中的「訂購日期、發貨日期、運貨商、貨主名稱、貨主地址、貨主城市、貨主省份」欄位拖入儲存格。
4）選中 A3 儲存格「訂購日期」欄位，點選「儲存格元素>基本」，將資料設定修改為「列表」。
5）設定完成後點選左上角「傳回視覺化看板」傳回畫布。
2.4 設計元件組件
2.4.1 新增組件
1）點選組件區「文字>標題」向畫布中新增四個標題組件，調整到適當的位置。
2）標題內容分別設定為 報表類型、年份、月份、日期 ，對應需要的參數類型。
3）點選組件區「元件」，向畫布中新增三個下拉框元件、一個日期時間控，調整到適當的位置。
2.4.2 設定下拉框元件
1）從左到右選中第一個下拉框元件，元件名稱為「type」。
資料字典類型設定為「自訂」，實際值和顯示值相同，為年報，月報，日報。
資料字典設定完成後，設定預設值為「年報」。
2）從左到右選中第二個下拉框元件，元件名稱為「year」。
資料字典類型設定為「自訂」，實際值和顯示值相同，為 2010、2011。
資料字典設定完成後，設定預設值為「2010」。
3）從左到右選中第三個下拉框元件，元件名稱為「month」。
資料字典類型設定為「自訂」，顯示值和實際值相同，為 01 ~ 12 。
資料字典設定完成後，設定預設值為「01」。
2.4.3 設定日期時間元件
選中日期時間元件，元件名稱為「date」。
預設值為自訂日期時間 2010-01-01，日期範圍為自訂，開始日期為 2010-01-01，結束日期為 2011-12-31。
2.4.4 設定組件隱藏
1）點選畫布左下角「組件圖層」按鈕，可展開收縮組件圖層列表。
2）雙擊組件名稱，可重新命名，將四個標題組件重新命名為 報表類型、年份、月份、日期 。
3）滑鼠懸浮組件名稱時，點選組件左側的小眼睛 icon，可切換組件顯示/隱藏狀態。設定日期和月份對應的組件隱藏。
2.5 新增編輯結束事件
1）選中 type 下拉框元件，在「互動>新增事件」中為其新增「編輯結束事件」。
2）事件名稱自訂為「元件聯動」，輸入 JavaScript 執行腳本。
JavaScript 執行腳本如下所示：
2.6 效果預覽
2.6.1 PC 端
點選「預覽」，效果如 1.2 節所示。
2.6.2 行動端
請先設定 行動端重佈局 ，預覽方式請參考 FVS行動端預覽 。效果如下圖所示：
3. 範本下載
點選下載範本：FVS實現元件根據條件顯示.fvs
