FVS跳轉網頁連結/彈出框事件

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

1.1 版本

1.2 應用場景

1）透過點選 FVS 範本中的標題組件、圖表組件的系列/分類或三維組件資料圖層等，實現在當前視窗/新視窗或透過彈出框開啟網頁或其他範本，並傳遞參數。

2）希望點選組件可以彈出氣泡彈窗，做一些簡單的文字說明。

效果如下圖所示：

選中組件，點選「互動>點選事件」，選擇「新增點選事件>網頁連結/彈出框」。即可新增一個事件，如下圖所示：

注：部分組件不支援「滑鼠點選事件」，詳情可參考文檔：FVS組件交互屬性 。2.1 事件名稱

根據實際需求自訂事件名稱，不支援為空，且不支援與當前組件的其他事件重名。

2.2 開啟方式

支援設定開啟方式為：新視窗、當前視窗、彈出框。選擇「彈出框」時支援對彈出框進行「樣式設定」。

注：若範本掛載在數據決策系統中，開啟方式為「新視窗」或「當前視窗」時，開啟的是平台的「新標籤頁」或「當前標籤頁」。

2.3 內容連結

注：設定內容後，切換內容連結類型，不會儲存之前的設定，請謹慎操作。

2.3.1 網頁連結

網頁連結支援絕對路徑和相對路徑，同時支援在路徑中插入公式使用。

2.3.2 範本連結

選擇範本連結後，下面出現「選擇範本」按鈕，點選即可選擇當前工程下任意報表檔案。

也可手動輸入範本路徑，以及為範本路徑新增後綴。例如給 cpt 填報範本新增後綴 &op=write：

2.3.3 文字提示

V2.6.1 及之後版本，標題組件 或 圖片組件 支援新增「文字提示」內容，開啟方式始終按「彈出框」生效。

用法與 富文字組件 一致，可直接輸入文字，新增公式等。

2.3.4 參數

內容連結為網頁連結/範本連結時，支援新增參數。參數類型支援兩種：

2.4 樣式設定

開啟方式選擇「彈出框」時，支援對彈出框進行樣式設定，且 PC端/行動端 可區分設定。

需在範本頂部工具欄中切換 PC端/行動端  ，再進入事件進行樣式設定。

注：V2.6.1 版本之前，行動端以固定彈窗樣式展示，不支援設定。

各設定項詳細說明如下：

3.1 建立範本

點選設計器菜單欄「檔案>建立視覺化看板」建立空白看板，範本樣式選擇內建「淺色主題一」，點選「建立看板」。

3.2 準備資料

建立資料庫查詢「ds1」，輸入 SQL語句：SELECT * FROM 銷量 。如下圖所示：

3.3 新增組件

1）向畫布中新增一個 標題組件、圖片組件和餅圖組件，調整組件大小和佈局。

2）將  圖片儲存到本地，圖片組件選擇「自訂上傳」，將圖片上傳後選擇圖片使用。如下圖所示：

3）餅圖組件綁定資料集「ds1」資料，分類為「無」，系列名為「地區」，值為「銷量」。如下圖所示：

3.4 設定網頁連結/彈出框事件

3.4.1 圖片組件設定文字提示彈出框

1）選中圖片組件，點選「互動」，新增點選事件「網頁連結/彈出框」。

2）設定事件名稱，開啟方式選擇「彈出框」，內容連結選擇「文字提示」，輸入需要提示的文字。

3）選中文字內容，修改文字顏色，對齊方式選擇左右置中和垂直置中。

4）設定彈出框樣式，選擇「動態顯示」，具體內容如下圖所示：

3.4.2 餅圖組件設定範本連結彈出框

1）選中餅圖組件，點選「互動>點選交互事件」，新增點選事件「滑鼠點選>網頁連結/彈出框」。

2）設定事件名稱，開啟方式選擇「彈出框」，內容連結選擇「範本連結」。

3）點選「選擇範本」，選擇設計器內建 GettingStartedTW.cpt 範本。

4）設定參數，參數名稱為「地區」（與 GettingStartedTW.cpt 範本中參數名保持一致），參數類型選擇「當前組件欄位」，參數內容為「系列名」。

5）設定彈出框樣式，選擇「置中顯示」，具體內容如下圖所示：

3.5 設定行動端樣式

1）切換到行動端模式，選中圖片組件，再開啟彈出框事件「樣式設定」面板，即可對「手機端」和「平板端」進行樣式設定。

2）保持動態顯示，修改「手機端」大小為「高度自適應」，彈出框佔螢幕比例保持預設 40% 。

3）其餘設定預設繼承 PC 端，可自行修改。

4）餅圖組件這裏不做修改。行動端固定為置中顯示，大小保持預設值即可，其餘設定繼承 PC 端設定。

3.6 效果預覽

3.6.1 PC 端

儲存範本，點選右上角「預覽」按鈕。效果如 1.2 節所示。

3.6.2 行動端

行動端請自行組合組件並開啟 行動端佈局 ，預覽方式參考 FVS行動端預覽 。效果如下圖所示：

點選下載範本：FVS跳轉網頁連結彈出框範例.fvs