自動輪播數據點提示時聯動其他圖表

1.1 預期效果

地圖自動播放數據點提示時，可以聯動其他圖表，效果如下圖所示：

1.2 實現思路

實現數據點提示自動輪播需要調用接口：chart.openAutoTooltip([delay, initPoints]);，該接口的詳細介紹可以參見文檔 地圖開啓數據的提示輪播 的說明。

2.1 準備數據

1）新建決策報表，新建數據集地圖，SQL 語句爲：SELECT * FROM 地圖

2）新建數據集圖表，SQL 語句爲：SELECT * FROM 地圖 where 1=1 ${if(len(area)=0,""," and pid='"+area+"'")}

注：參數 area 是聯動的關鍵，地圖輪播時通過 area 參數傳遞地區，使圖表數據集中 SQL 獲取到該地區的數據。

2.2 插入圖表

拖入三個圖表組件：地圖、餅圖、柱形圖，如下圖所示：

地圖和圖表在數據和樣式上的設置此處不詳細介紹，下面主要講下如何實現輪播提示點時可以聯動圖表。

2.3 添加事件

選中 body，添加一個初始化後事件，如下圖所示：

在初始化事件的參數界面處，新建一個 area 參數，參數值使用公式：sql("FRDemo","SELECT distinct pid FROM 地圖 where pid!=''",1)

JavaScript 代碼如下：

setTimeout(function() {

	var autoTooltipDelay = 3; // 默認3s播放一個提示.

	// 第一步, 拿圖表實例.
	var vanchart = FR.Chart.WebUtils.getChart('地圖').getChartWithIndex(0);
	// 第二步, 篩選出區域名稱滿足的所有的系列的點, 用於傳遞給自動數據提示接口.
	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);
	}

	// 第五步, 使用輪播提示接口觸發輪播數據提示
	vanchart.openAutoTooltip(autoTooltipDelay * 1000, points);

	// 修改參數, 聯動其他圖表或者組件.
	function changeParameter(areaName) {
		/*刷新餅圖*/
		FR.Chart.WebUtils.changeParameter(
			'餅圖', {
				"area": areaName
			}
		);
		/*刷新柱形圖*/
		FR.Chart.WebUtils.changeParameter(
			'柱形圖', {
				"area": areaName
			}
		);
	}

}, 2000);
顯示代碼

2.4 預覽效果

保存模板，點擊PC端預覽，效果如1.1預期效果中所示。

注：不支持移動端。

已完成的模板，可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表單JS實例\自動輪播數據點提示時聯動其他圖表.frm

點擊下載模板：自動輪播數據點提示時聯動其他圖表.frm