FVS實現跳轉不同網頁連結

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

1.1 版本

1.2 應用場景

FVS 中的 網頁連結 /彈出框事件 可以實現跳轉單個網頁連結或範本，但如果需要根據不同的物件，跳轉不同的連結時，則需要透過 JavaScript 事件實現。

例如根據圖表系列，跳轉不同範本，效果如下圖所示：

1.3 實現思路

給組件新增 JavaScript 類型點選事件，使用 JavaScript 程式碼實現在新視窗開啟網頁連結的功能。

常用 JavaScript 程式碼如下表所示：

注：以下程式碼均是在新標籤頁開啟，如需在當前頁開啟，將 window.open 更換為 window.location.replace 即可。

window.open("https://www.fanruan.com/");

window.open("http://localhost:8075/webroot/decision/view/report?viewlet=GettingStarted.cpt");

window.open("http://localhost:8075/webroot/decision/view/report?viewlet=GettingStarted.cpt&地區="+area);

if(series=='華東') /*判斷系列名為華東*/
{
var URL='/webroot/decision/view/report?viewlet=demo/basic/產品明細.cpt'; 
window.open(encodeURI(encodeURI(URL))); //在新標籤頁開啟產品明細.cpt
}
if(series=='華北') /*判斷系列名為華北*/
{
var URL='/webroot/decision/view/report?viewlet=demo/basic/分組統計.cpt'; 
window.open(encodeURI(encodeURI(URL))); //在新標籤頁開啟分組統計.cpt
}

2.1 建立範本

點選設計器菜單欄「檔案>建立視覺化看板」建立空白看板，可自訂範本名稱和尺寸，點選「建立看板」。如下圖所示：

2.2 準備資料

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

2.3 新增餅圖組件

選擇組件區「圖表>餅圖類>餅圖」，點選新增到頁面中。

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

2.4 設定 JavaScript 事件

選中餅圖組件，點選「交互>點選事件」，新增點選事件「JavaScript」。

設定事件名稱為「跳轉不同範本」。

設定參數，參數名稱為「area」，參數類型選擇「當前組件欄位」，參數內容為「系列名」。

輸入 JavaScript 程式碼如下：

if(area=='華東') /*判斷系列名為華東*/
{
var URL='http://localhost:8075/webroot/decision/view/report?viewlet=demo/basic/產品明細.cpt'; 
window.open(encodeURI(encodeURI(URL))); //在新標籤頁開啟產品明細.cpt
}
if(area=='華北') /*判斷系列名為華北*/
{
var URL='http://localhost:8075/webroot/decision/view/report?viewlet=demo/basic/分組統計.cpt'; 
window.open(encodeURI(encodeURI(URL))); //在新標籤頁開啟分組統計.cpt
}

2.5 效果預覽

儲存範本，點選右上角「預覽」按鈕。按照點選的餅圖的系列名，在新視窗開啟不同的子範本。

注：不支援行動端。

點選下載範本：FVS實現跳轉不同網頁連結.fvs