JS實現按分類鑽取圖表

1.1 預期效果

在圖表的應用需求中，有時候會需要按照圖表類型去鑽取到相應頁面，如下圖所示：

1.2 實現思路

使用 iframe 實現當前頁鑽取，並彈出框方式展示。

var iframe = $("<iframe id='001' name='001' width='100%' height='100%' scrolling='yes' frameborder='0'>") 
// iframe參數的命名及寬高等
if (參數 == '分類1') {    //判斷點選到的點，根據所選緯度彈出明細對話框
    iframe.attr("src", "report?viewlet=/詳細1.cpt&op=view&參數=" + 參數 + "")
}
..........else
........
var o = {
    title: wd,    //對話框標題(這裏取雷達圖緯度名作彈出框標題)
    width: 1265,  //寬   統一寬高
    height: 370  //高}
FR.showDialog(o.title, o.width, o.height, iframe, o) //彈出對話框

注：類似 FVS 鑽取可參考文檔 FVS實現跳轉不同網頁連結 。

2.1 建立範本

在 FineReport 設計器中，點選「檔案>建立決策報表」，在圖表塊中選擇雷達圖拖入到決策報表中，如下圖所示：

2.2 資料準備

1）建立 內建資料集 ，如下圖所示：

2）滑鼠左鍵點選決策報表中央的「編輯」，在右側屬性面板中選擇「元件設定>資料」，雷達圖的資料設定如下圖所示：

2.3 新增超級連結

在屬性面板右側選擇「元件設定>特效」，在超級連結處新增「JavaScript」超級連結，其中需要新增「wd」和「jd」這兩個參數。

如下圖所示：

JS 程式碼如下所示：

var iframe = $("<iframe id='001' name='001' width='100%' height='100%' scrolling='yes' frameborder='0'>") 
// iframe參數的命名及寬高等
if (wd == '產品') {    //判斷點選到的點，根據所選緯度彈出明細對話框
iframe.attr("src", "report?viewlet=/demo/analytics/sales/按產品統計營收.frm&op=view&jd=" + jd + "")}
else if (wd == '分公司') {
iframe.attr("src", "report?viewlet=/demo/analytics/sales/按分公司統計營收.frm&op=view&jd=" + jd + "")}
else if (wd == '地區') {    
iframe.attr("src", "report?viewlet=/demo/analytics/sales/按地區統計營收.frm&op=view&jd=" + jd + "")}
else if (wd == '時間') {    
iframe.attr("src", "report?viewlet=/demo/analytics/sales/按時間統計營收.frm&op=view&jd=" + jd + "")}
var o = {    title: wd,    //對話框標題(這裏取雷達圖緯度名作彈出框標題)    
             width: 900,  //寬   統一寬高    
             height: 300 //高
         }
FR.showDialog(o.title, o.width, o.height, iframe, o) //彈出對話框

使用者若需要單獨定義每個彈出框的寬高，JS 程式碼如下所示：

var url = "";
var title = "";
var o = "";
if(wd=="產品"){    
url = "report?viewlet=/demo/analytics/sales/按產品統計營收.frm&op=view&jd=" + jd + "";
title = wd;    
o = {width : 400,  //對話框寬度
height: 400   //對話框高度     
};} 
if(wd=="分公司"){    
url = "report?viewlet=/demo/analytics/sales/按分公司統計營收.frm&op=view&jd=" + jd + "";
title = wd;    
o = {width : 600,  //對話框寬度
height: 300   //對話框高度     
};}
if(wd=="地區"){    
url = "report?viewlet=/demo/analytics/sales/按地區統計營收.frm&op=view&jd=" + jd + "";
title = wd;    
o = {width : 900,  //對話框寬度
height: 400   //對話框高度     
};}
if(wd=="時間"){    
url = "report?viewlet=/demo/analytics/sales/按時間統計營收.frm&op=view&jd=" + jd + "";
title = wd;    
o = {width : 1000,  //對話框寬度
height: 200   //對話框高度     
};}
var iframe = $("<iframe id='inp' name='inp' width='100%' height='100%' scrolling='yes' frameborder='0'>"); 
// 對話框內iframe參數的命名，預設寬高佔比是100%，可向下捲動    
iframe.attr("src", url); // 給iframe新增src屬性 
//彈出對話框
FR.showDialog(title, o.width, o.height, iframe,o);

當在決策系統中預覽時，可能會出現開啟彈出框報錯，首次存取時跳轉到明細的連結不正確

解決方法:修改JavaScript

新增url參數:動態獲取存取地址

公式= "http://"+serverName+":"+serverPort+servletURL+"?viewlet="

serverName 是指伺服器地址或名稱。範例地址中，serverName 指的是：localhost，即存取機子的 IP。

serverPort 是指存取的埠。範例地址中，serverPort 指的是：8075。

servletURL 是指 servlet 的 URL。範例地址中，servletURL 指的是：/webroot/decision/view/report，其參數${servletURL}的具體應用場景，可參考：網頁框元件 文檔。

 修改連結：

  iframe.attr("src", url"+/test/明細1.cpt&op=view&jd=" + jd + "")

2.4 效果查看

儲存範本，點選「PC端預覽」，效果同本文1.1章「預期效果」相同。

注：該方法不支援行動端。

點選下載範本：JS實現按分類鑽取圖表.frm

4.1 IE報400錯誤

4.1.1 問題描述

在 IE 瀏覽器中鑽取頁面，開啟 iframe 時報錯：java.lang.IllegalArgumentException: 在請求目標中找到無效字元。有效字元在RFC 7230和RFC 3986中定義，如下圖所示：

4.1.2 解決方案

這是由於 URL 中的中文沒有使用 UTF-8 編碼導致的，解決方案有兩個：

1）方法一

勾選 IE 瀏覽器的「傳送intranet URL 的 UTF-8 查詢字串」設定項，如下圖所示：

2）方法二

將 JavaScript 腳本中 iframe 的 src 屬性 使用 encodeURI("**") 進行編碼，需要修改下程式碼。程式碼如下：

var iframe = $("<iframe id='001' name='001' width='100%' height='100%' scrolling='yes' frameborder='0'>") // iframe參數的命名及寬高等

var src =null;
if (wd == '產品') {    //判斷點選到的點，根據所選緯度彈出明細對話框
    src="report?viewlet=/demo/analytics/sales/按產品統計營收.frm&op=view&jd=" + jd + "";}
else if (wd == '分公司') {
    src="report?viewlet=/demo/analytics/sales/按分公司統計營收.frm&op=view&jd=" + jd + "";}
else if (wd == '地區') {    
    src="report?viewlet=/demo/analytics/sales/按地區統計營收.frm&op=view&jd=" + jd + "";}
else if (wd == '時間') {    
    src="report?viewlet=/demo/analytics/sales/按時間統計營收.frm&op=view&jd=" + jd + "";}
if(src){
		iframe.attr("src",encodeURL(src))
}	
var o = {    title: wd,    //對話框標題(這裏取雷達圖緯度名作彈出框標題)    
             width: 900,  //寬   統一寬高    
             height: 300 //高
         }
FR.showDialog(o.title, o.width, o.height, iframe, o) //彈出對話框