反饋已提交

網絡繁忙

FVS點擊跳轉網頁連結

1. 概述

適用場景:安裝了「FVS企業戰情室編輯模式」插件的使用者,可參考本文了解 FVS 範本的相關功能。

注:不支援行動端。

1.1 版本

報表伺服器版本JAR包插件版本功能變動
11.02021-11-15V1.0.0
-
11.0.6-V1.5.0連結位址新增「範本路徑」選項,支援直接選擇工程下相對路徑的報表檔案。詳情參見 2.1 節
11.0.9
-V1.14.1網頁連結支援設定開啟方式。詳情參見 2.1 節
11.0.16-V1.16.1網頁連結位址為「網頁路徑」時,支援「插入公式」,實現動態URL
11.0.16
V2.0.0原彈出框、網頁連結事件合併入口為「網頁連結/彈出框」事件,原網頁連結「對話框」開啟方式合併為「彈出框」開啟方式

1.2 應用場景

透過點選 FVS 企業戰情室範本中的圖表系列/分類或三維組件資料圖層,在當前彈窗/新視窗開啟網頁,並傳遞參數。

本文將提供兩種方式:網頁連結事件、JavaScript事件。

FVS點選跳轉網頁連結.gif

2. 功能簡介

注:部分組件不支援「點選事件」,詳情可參考文檔 FVS組件交互屬性 。

2.1 網頁連結

選中組件,點選「交互>點選事件」,選擇「新增點選事件>網頁連結」。即可新增一個網頁連結事件,如下圖所示:

各設定項詳細說明如下表:

設定項
簡介

事件名稱

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

開啟方式

支援設定開啟方式為:新視窗、當前視窗、彈出框,選擇「彈出框」時支援「樣式設定」

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

彈出框「樣式設定」如下圖所示:

注:樣式設定在行動端不生效。

  • 顯示位置:可選擇「置中顯示」或「動態顯示」

  • 聯動線:選擇「動態顯示」時,支援設定觸發物件和彈出框之間聯動線的顏色,且顏色支援設定不透明度

  • 大小:彈出框的寬度和高度

  • 標題:可設定是否顯示標題(即事件名稱),以及標題文字的字元樣式、顏色、對齊方式等

  • 邊框背景:支援設定彈出框的背景為無、顏色、我的資源、自訂上傳。設定方式同 組件邊框背景 ,支援設定邊框背景的不透明度

  • 內邊距:可設定彈出框內容距離彈出框的邊距

內容連結

網頁連結

1)絕對路徑

  • 網頁:確定當前伺服器可存取該位址即可

https://www.fanruan.com/

  • 範本:確定當前伺服器可存取該位址即可

http://localhost:8075/webroot/decision/view/report?viewlet=GettingStarted.cpt

2)相對路徑

  • 網頁:需要將資源檔案儲存到%FR_HOME%\webapps\webroot資料夾下

/webroot/1.png

  • 範本:需要將範本檔案儲存到%FR_HOME%\webapps\webroot\WEB-INF\reportlets資料夾下

      普通報表範例如下:

/webroot/decision/view/report?viewlet=GettingStarted.cpt

      FVS範本範例如下:

/webroot/decision/view/duchamp?viewlet=第一張FVS範本.fvs

3)支援插入公式

範本連結

選擇範本路徑後,右側出現「選擇範本」按鈕,點選即可選擇當前工程下任意報表檔案

參數

支援新增參數,參數型別支援三種:

1)當前組件欄位:參數內容可與組件內容相結合,例如地圖區域名,柱形圖系列名等

2)自訂公式編輯:可使用公式輸入

3)自訂內容:可直接填寫正文

3. 範例

3.1 建立範本

點選設計器菜單欄「檔案>建立視覺化看板」建立空白看板,設定範本名稱為「FVS跳轉網頁連結或彈出框範例」,點選「建立看板」。如下圖所示:

3.2 建立資料集

使用者建立資料庫查詢「ds1」,SQL語句:SELECT * FROM 銷量 。如下圖所示:


3.3 新增餅圖組件

在「頁面1」,使用者選擇組件區「圖表>餅圖類>餅圖」,點選新增到頁面中。

選中組件,在配置區設定組件「內容>資料」,設定資料集為「ds1」,分類為「無」,系列名為「地區」,值為「銷量」,具體如下圖所示。

組件樣式可根據個人喜好設定,本文不再贅述。

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

選中餅圖組件,點選「交互>點選事件」,新增點選事件「網頁連結/彈出框」。

設定事件名稱為「銷售詳情」。

開啟方式選擇「彈出框」。

內容連結選擇「範本連結」,點選「選擇範本」選擇設計器內建 GettingStartedTW.cpt 範本。

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

3.5 設定彈出框樣式

3.5.1 動態顯示

設定顯示位置為「動態顯示」,其餘設定項根據實際情況合理設定即可。本例設定如下圖所示:

3.5.2 置中顯示

頁面1 設定好後,直接複製頁面,在新頁面中修改設定即可。


設定顯示位置為「置中顯示」,勾選「顯示標題」,可設標度題文字樣式,這裏顯示的標題即為該事件的名稱。如下圖所示:

3.6 效果預覽

3.6.1 PC 端

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

3.6.2 行動端

預覽方式請參考 FVS行動端預覽 。

動態顯示時,當前效果對應原彈出框效果,以固定的彈窗樣式開啟。如下圖所示:


置中顯示時,當前效果對應原網頁連結效果,以超連結方式在當前視窗開啟;


4. 範本下載

已完成範本請參見:FVS網頁連結跳轉範例.fvs

範例一、範例二、範例三分別對應範本中的頁面1、頁面2、頁面3。

5. 相關推薦

文檔索引
內容簡介
FVS三維組件點選跳出彈出框
三維組件資料圖層新增「網頁連結/彈出框」事件,實現點選三維組件元素跳出彈出框,展示更多內容
FVS實現跳轉不同網頁連結
透過 JavaScript 事件,實現根據不同參數跳轉不同網頁連結


附件列表


主題: FineVis數據視覺化
已經是第一篇
已經是最後一篇
  • 有幫助
  • 沒幫助
  • 只是瀏覽
  • 圖片不清晰
  • 用語看不懂
  • 功能說明看不懂
  • 操作說明太簡單
  • 內容有錯誤
中文(繁體)

文 檔回 饋

滑鼠選中內容,快速回饋問題

滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。

不再提示

10s後關閉