FVS支援的JS事件說明

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

1.1 版本

1.2 功能簡介

FVS 視覺化看板中支援使用 JavaScript 程式碼觸發聯動、跳轉等交互效果。

本文主要介紹支援使用 JavaScript 程式碼的幾種事件類型，具體的 JS API請參見：FVS大屏JS接口匯總 。

2.1 頁面載入結束事件

在 FVS 看板編輯介面，點選頂部菜單欄「範本>頁面載入結束事件」，支援輸入 JavaScript 程式碼，對整個 FVS 範本生效。

使用「頁面載入結束事件」時，若發現事件未生效，可新增延時函式 setTimeout，寫法如下：

setTimeout(() => {
duchamp.getWidgetByName("組件1").openAutoTooltip(); //開啟圖表組件提示點自動輪播
}, 500) //500表示500毫秒，0.5秒

2.2 初始化後事件

「初始化後事件」為 V1.5.0 版本插件新增的事件類型，僅 表格組件 和所有 元件組件 支援初始化後事件。

2.3 編輯結束事件

「編輯結束事件」為 V1.5.0 版本插件新增的事件類型，僅「正文框元件、日期時間元件、下拉框元件、下拉複選框元件」支援編輯結束事件。

2.4 點選事件

2.4.1 除元件外的其他組件

選中單個組件，點選配置欄「交互>點選事件」，支援新增 JavaScript 類型的點選事件。事件在點選這個組件/組件內指定內容時生效。

注：以下組件不支援點選事件：

富正文組件、表格組件、輪播器組件、網頁框組件、本地視頻組件、本地監視組件

輪播餅圖、輪播夜光儀表盤、水球圖、像素點圖、輪播閃爍指標卡、輪播電子指標卡、輪播目錄齒輪圖、輪播三維組合地圖、輪播GIS點地圖、輪播條形圖、弧形柱形圖、粒子計數器、三維流向地球、時間齒輪

2.4.2 元件組件

V1.5.0 版本插件新增元件以及元件事件，僅「單選按鈕組元件、複選按鈕組元件」支援點選事件，且點選事件僅支援使用 JavaScript 代碼。

V2.10.0 及之後版本，「單選按鈕組元件、複選按鈕組元件」按鈕元件合併為「按鈕組」元件，僅支援「初始化後」和「編輯結束」事件。「查詢按鈕」支援點選事件 。

如下圖所示：

2.5 標籤切換事件

選中單個組件，點選配置欄「交互>交互事件」，支援新增 JavaScript 類型的標籤切換事件。事件在這個組件/組件內指定內容輪播時生效 。

注1：V2.10.0 之前版本，標籤切換事件入口位於「輪播設定」Tab 下 。

注2：僅以下組件支援 JavaScript 類型的標籤切換事件：

場景地圖、輪播器組件、電子智慧樹圖、模型智慧樹圖、輪播餅圖、輪播夜光儀表盤、水球圖、像素點圖、輪播閃爍指標卡、輪播電子指標卡、輪播目錄齒輪圖、輪播三維組合地圖、輪播GIS點地圖

3.1 呼叫API的方法

在使用 FineReport 設計器其他報表類型時，呼叫全局API一般使用 FR.xxx ，呼叫組件API一般使用 _g.xxx 。

但是在 FVS 範本中，呼叫API的方式統一為 duchamp.xxx 。

3.2 JS 腳本限制

1）不支援引用外部 JS 、CSS 檔案。

2）不建議使用 JS 腳本直接操作 dom 結構，例如一些 document 及 jQuery 上的 API。

因為未來產品 dom 結構可能變化，後續升級可能導致之前的 JS 獲取不到物件，無法保證穩定性。

若一定要使用，需在 JavaScript 程式碼前加上 "use document"; 

例如當符合某特定條件時，比如某參數值>100，觸發聲音提示。JavaScript 程式碼範例如下：

"use document";
// 建立⼀個 audio 標籤⽤於播放聲⾳
const audio = document.createElement("audio");
// 指定⼀個 mp3 ⽂件，⽤來播放此 mp3 ⽂件。
audio.src = "/webroot/help/5196.mp3";
audio.loop = true;// 設定為循環播放
document.body.appendChild(audio);// 將標籤新增到⻚⾯上，否則⽆法播放。
// 建立⼀個定時循環，週期為 2 秒
const interval = setInterval(() => {
 // 獲取fvs⻚⾯中名稱叫 組件1 的組件
 const widget = duchamp.getWidgetByName("組件1");
 // 判斷這個組件的參數abc 的值是否是⼤於100，如果⼤於100
 if (widget.getParameters("abc") > 100) {
 audio.play();// 開始播放
 clearInterval(interval);// 停⽌定時循環
 }
}, 2000);
顯示程式