JS控制滑鼠懸停效果的開啟與關閉

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

1.1 版本

1.2 應用場景

當三維組件開啟視角旋轉、輪播組件開啟輪播或表格開啟跑馬燈時，滑鼠懸浮組件會暫停播放，滑鼠移開後將繼續播放。然而，在某些場景下，可能希望這些效果不受滑鼠影響，能夠持續進行旋轉、輪播或捲動。如下圖所示：

1.3 實現方式

使用 openHoverPauseRollPlay 與 closeHoverPauseRollPlay 兩個API，可以實現控制組件是否開啟懸浮時暫停播放的功能。

注1：僅支援 FVS V3.0.0 及以上版本。

注2：預設情況下滑鼠懸停功能開啟。若透過 closeHoverPauseRollPlay 將其關閉，需使用 openHoverPauseRollPlay 重新啟動滑鼠懸停功能。

duchamp.getWidgetByName("組件名稱").closeHoverPauseRollPlay();//關閉組件滑鼠懸停
duchamp.getWidgetByName("組件名稱").openHoverPauseRollPlay();//開啟組件滑鼠懸停

2.1 建立範本

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

2.2 設計組件

新增兩個 標題組件 用於設定點選事件，分別設定標題組件的「標題內容」為 關閉所有組件的懸停 和 開啟所有組件的懸停。

可以實現輪播/旋轉/捲動的組件可隨意新增，本例新增了一個輪播餅圖、一個三維自訂組件和一個表格。

分別設定這些組件的內容為「輪播餅圖、三維自訂組件、表格」，在「組件」面板中可修改組件名稱。如下圖所示：

2.3 設定 JavaScript 事件

1）選中「關閉所有組件的懸停」標題組件，點選「交互>交互事件>新增事件>滑鼠點選>JavaScript」。

輸入以下 JavaScript 腳本：

duchamp.getWidgetByName("輪播餅圖").closeHoverPauseRollPlay();
duchamp.getWidgetByName("三維自訂組件").closeHoverPauseRollPlay();
duchamp.getWidgetByName("表格").closeHoverPauseRollPlay();

步驟如下圖所示：

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

duchamp.getWidgetByName("輪播餅圖").openHoverPauseRollPlay();
duchamp.getWidgetByName("三維自訂組件").openHoverPauseRollPlay();
duchamp.getWidgetByName("表格").openHoverPauseRollPlay();

2.4 效果預覽

點選右上角「預覽」，關閉所有組件的懸停的效果如 1.2 節中所示。

再次開啟所有組件的懸停：

點選下載範本：JS控制滑鼠懸停效果的開啟與關閉.fvs