JS實現FVS組件的隱藏或顯示

適用場景：安裝了「FineVis資料視覺化」插件的使用者，可參考本文了解 FVS 範本的相關功能。

1.1 版本

1.2 應用場景

FVS 範本中通常使用 輪播器組件 實現多個組件/組合的切換展示，但是輪播器的樣式或者功能在某些場景下存在限制。

這時我們可以透過 JS 實現預覽時手動控制組件的隱藏或顯示，預期效果下圖所示：

1.3 實現方式

 透過 setVisible API，使用 JavaScript 事件實現。JavaScript 程式碼範例如下：

注1：僅支援 V1.8.0 及之後的插件。

注2：該API僅對當前頁面組件或組合有效。

duchamp.getWidgetByName("組件名稱").setVisible(false); //true 表示設定為可見，false 表示設定為不可見

2.1 建立範本

點選設計器左上角「檔案>建立視覺化看板」，建立一張空白看板，可自訂名稱和尺寸。如下圖所示：

2.2 設計組件

新增 標題組件 用於設定點選事件，用於被隱藏或顯示的組件可隨意新增，本例新增了一個柱形圖、一個餅圖和一個折線圖。

將幾個圖表重疊在一起，分別設定標題組件的內容為「柱形圖、餅圖、折線圖」，在「組件」面板中可修改組件名稱。

點選畫布左下角按鈕展開「組件圖層」列表。如下圖所示：

每一個頁面的每一個組件都佔用一個組件圖層。滑鼠懸浮於組件物件時，左側出現一個  圖示，表示組件為可見狀態；點選圖示可切換為  不可見狀態，不可見圖示會固定顯示。

本例將餅圖和折線圖設定為「不可見」，如下圖所示：

2.3 設定 JavaScript 事件

1）選中「柱形圖」標題，點選「交互>點選事件>新增點選事件>JavaScript」。

輸入事件名稱，輸入 JavaScript 腳本：

duchamp.getWidgetByName("柱形圖").setVisible(true); //設定柱形圖可見
duchamp.getWidgetByName("餅圖").setVisible(false); //設定餅圖不可見
duchamp.getWidgetByName("折線圖").setVisible(false); //設定折線圖不可見

步驟如下圖所示：

2）同理設定另外兩個標題組件的 JavaScript 事件：

• 餅圖：

duchamp.getWidgetByName("餅圖").setVisible(true); //設定餅圖可見
duchamp.getWidgetByName("柱形圖").setVisible(false); //設定柱形圖不可見
duchamp.getWidgetByName("折線圖").setVisible(false); //設定折線圖不可見

• 折線圖：

duchamp.getWidgetByName("折線圖").setVisible(true); //設定折線圖可見
duchamp.getWidgetByName("餅圖").setVisible(false); //設定餅圖不可見
duchamp.getWidgetByName("柱形圖").setVisible(false); //設定柱形圖不可見

3）同時選中多個組件，按滑鼠右鍵，右鍵點選「組合」即可將組件組合在一起。如下圖所示：

注：此步驟是為了讓行動端的標題組件和PC端的標題組件一致。

2.4 效果預覽

2.4.1 PC 端

點選右上角「預覽」。預覽效果如 1.2 節預期效果所示。

2.4.2 行動端

預覽方式請參考 FVS行動端預覽 ，效果如下圖所示：

點選下載範本：JS實現FVS組件的隱藏或顯示.fvs