1. 概述
適用場景：安裝了「FineVis資料視覺化」插件的使用者，可參考本文了解 FVS 範本的相關功能。
1.1 版本
| 報表伺服器版本 | 插件版本 | 功能變動 |
|---|---|---|
| 11.0.22 | V2.3.0 | 「互動>點選事件」新增顯示/隱藏事件，無需透過 JS 即可實現顯示隱藏組件 |
1.2 應用場景
FVS 範本在 V2.3.0 之前的版本中，要實現 組件的顯示隱藏 需透過 JavaScript 事件實現，設定及後續維護較為繁瑣。
V2.3.0 版本新增「顯示/隱藏」點選事件，透過簡單配置即可實現組件顯示、隱藏或切換顯示/隱藏。
2. 功能介紹
所有支援點選事件的二維組件，均支援「顯示/隱藏」事件。新增後可控制目標物件的顯示或隱藏。
事件名稱不支援為空，同一組件的事件不支援重名；
支援新增多條物件；
目標物件支援搜尋篩選組件，支援多選組件；
交互動作支援三種類型：顯示、隱藏或切換顯示/隱藏。
3. 範例
3.1 建立範本
點選設計器左上角「檔案>建立視覺化看板」，建立一個空白視覺化看板。如下圖所示：
3.2 新增組件
新增 標題組件 用於設定點選互動事件，用於被隱藏或顯示的組件可隨意新增。
本例新增了一個柱形圖、一個餅圖和一個折線圖，以及三個圖片組件作為標題組件的背景，可自訂修改組件名稱。
最終效果如下圖所示：
在初始狀態，我們需要將希望隱藏的組件，手動設定為不可見狀態。如下圖所示：
3.3 設定顯示隱藏事件
選中「柱形圖」標題，點選「互動>添加事件>滑鼠點選>顯示/隱藏」。
自訂事件名稱，目標物件及交互動作設定如下：
| 目標物件 | 交互動作 |
|---|---|
| 柱形圖、柱形圖示題背景 | 顯示 |
| 餅圖、折線圖、餅圖示題背景、折線圖示題背景 | 隱藏 |
同理設定另外兩個標題組件的事件，選擇對應標題要實現顯示或隱藏的目標物件即可，這裏不再贅述。
3.4 效果預覽
3.4.1 PC端
點選範本右上角「預覽」，效果下圖所示：
3.4.2 行動端
行動端請自行組合組件並開啟 行動端佈局 ，預覽方式請參考 FVS行動端預覽 ，效果如下圖所示：
4. 範本下載
點選下載範本：FVS顯示隱藏組件事件.fvs
