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 预览效果

保存模板，点击表单预览，效果如1.1预期效果中所示。

注：不支持移动端。

已完成的模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\自动轮播数据点提示时联动其他图表.frm

点击下载模板：自动轮播数据点提示时联动其他图表.frm