自動輪播資料點提示時聯動其他圖表

1.1 預期效果

決策報表 中，希望地圖資料點提示自動輪播時，可以聯動其他圖表或報表塊。效果如下圖所示：

1.2 實現思路

實現資料點提示自動輪播需要呼叫API：chart.openAutoTooltip([delay, initPoints])，該API的詳細介紹請參見文檔 圖表資料點提示自動輪播API 的說明。

再透過給 body 新增 JS 事件觸發傳參並重新整理其他組件。

注1：該API不支援行動端，不支援擴展圖表。

注2：FVS 請參考文檔：FVS圖表提示輪播聯動其他組件 。

2.1 準備資料

點選設計器左上角「檔案>建立決策報表」，進入範本後在左下方建立兩個資料庫查詢，查詢語句分別為：

地圖：SELECT * FROM 地圖

圖表：SELECT * FROM 地圖 where 1=1 ${if(len(area)=0,""," and pid='"+area+"'")}

注：參數 area 是聯動的關鍵，地圖輪播時透過 area 參數傳遞地區，使圖表資料集中 SQL 獲取到該地區的資料，可自訂初始值。

2.2 設計報表

2.2.1 拖入組件

向決策報表 body 中拖入地圖、餅圖和報表塊組件。調整佈局如下圖所示：

2.2.2 設計地圖

本例不對地圖做過多的樣式設定，直接綁定資料即可。

雙擊地圖，進入編輯狀態，綁定地圖資料如下圖所示：

2.2.3 設計餅圖

1）雙擊餅圖，綁定餅圖資料為含有參數的 圖表 資料集。如下圖所示：

2）設定餅圖「樣式>標題」為公式 $area ，則餅圖示題會根據參數 area 變化。如下圖所示：

2.2.4 設計報表塊

雙擊進入報表塊，將 圖表 資料集中的欄位拖入儲存格，自訂標題行即可。如下圖所示：

點選報表塊介面左下角「表單」按鈕傳回 body 介面。

2.3 新增事件

選中 body，新增兩個「初始化後」事件，雙擊名稱分別重新命名為「聯動報表塊」和「聯動餅圖」。如下圖所示：

2.3.1 聯動餅圖

點選事件前的編輯按鈕，進入 JavaScript 編輯介面。

首先建立一個參數，參數名為 area ，參數值選擇公式，輸入：sql("FRDemoTW","SELECT distinct pid FROM 地圖 where pid!=''",1)

公式說明：獲取 FRDemoTW 資料庫中「地圖」資料表 pid 欄位對應的第 1 列的所有值，且篩除重複和為空的資料。詳情可參考 SQL函式 。

輸入 JavaScript 程式碼如下：

setTimeout(function() {
// 第一步, 獲取圖表物件
var vanchart = FR.Chart.WebUtils.getChart('chart0').getChartWithIndex(0);
// 第二步, 篩選出區域名稱滿足的所有的系列的點, 用於傳遞給自動資料提示API
var points = vanchart.series.reduce(function(points, ser) {
return points.concat(ser.points);
	}, []).filter(function(point) {
return area && area.indexOf(point.name) >= 0;
	});
// 第三步, 儲存舊的顯示提示方法
var oldChartShowTooltip = vanchart.showTooltip;
// 第四步, 重寫新的提示方法, 在提示的同時觸發聯動
	vanchart.showTooltip = function(point) {
		oldChartShowTooltip.apply(vanchart, Array.prototype.slice.call(arguments));
var areaName = point.name;
		changeParameter(areaName);
	}
// 第五步, 開啟資料點提示自動輪播API，輪播間隔時間為 3 秒
	vanchart.openAutoTooltip(3000, points);
// 修改參數, 聯動其他圖表組件
function changeParameter(areaName) {
		FR.Chart.WebUtils.changeParameter(
'chart1', {
"area": areaName
			}
		);		
	}
}, 2000);
隱藏程式碼

如下圖所示：

2.3.2 聯動報表塊

點選事件前的編輯按鈕，進入 JavaScript 編輯介面。

和聯動餅圖一樣，需建立參數 area ， 參數值選擇公式輸入：sql("FRDemoTW","SELECT distinct pid FROM 地圖 where pid!=''",1)

輸入 JavaScript 程式碼如下：

setInterval(function() { 
     _g().getWidgetByName('report0').gotoPage(1,"{}",true);
}, 3000); 
//每 3 秒重新整理一次報表塊並傳參

如下圖所示：

2.4 預覽效果

儲存範本，點「PC端預覽」，效果如 1.1 預期效果中所示。

注：不支援行動端。

點選下載範本: 自動輪播數據點提示時聯動其他圖表.frm