1.1 预期效果

决策报表 中，希望地图数据点提示自动轮播时，可以联动其他图表或报表块。效果如下图所示：

1.2 实现思路

实现数据点提示自动轮播需要调用接口：chart.openAutoTooltip([delay, initPoints])，该接口的详细介绍请参见文档 图表数据点提示自动轮播接口 的说明。

再通过给 body 添加 JS 事件触发传参并刷新其他组件。

注1：该接口不支持移动端，不支持扩展图表。

注2：FVS 请参考文档：FVS图表提示轮播联动其他组件 。

2.1 准备数据

点击设计器左上角「文件>新建决策报表」，进入模板后在左下方新建两个数据库查询，查询语句分别为：

ds1：SELECT * FROM 地图

ds2：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）双击饼图，绑定饼图数据为含有参数的 ds2 数据集。如下图所示：

2）设置饼图「样式>标题」为公式 $area ，则饼图标题会根据参数 area 变化。如下图所示：

2.2.4 设计报表块

双击进入报表块，将 ds2 数据集中的字段拖入单元格，自定义标题行即可。如下图所示：

点击报表块界面左下角「表单」按钮返回 body 界面。

2.3 添加事件

选中 body，添加两个「初始化后」事件，双击名称分别重命名为「联动报表块」和「联动饼图」。如下图所示：

2.3.1 联动饼图

点击事件前的编辑按钮，进入 JavaScript 编辑界面。

首先新建一个参数，参数名为 area ，参数值选择公式，输入：sql("FRDemo","SELECT distinct pid FROM 地图 where pid!=''",1)

公式说明：获取 FRDemo 数据库中「地图」数据表 pid 字段对应的第 1 列的所有值，且筛除重复和为空的数据。详情可参考 SQL函数 。

输入 JavaScript 代码如下：

setTimeout(function() {
	// 第一步, 获取图表对象
	var vanchart = FR.Chart.WebUtils.getChart('chart0').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);
	}
	// 第五步, 开启数据点提示自动轮播接口，轮播间隔时间为 3 秒
	vanchart.openAutoTooltip(3000, points);
	// 修改参数, 联动其他图表组件
	function changeParameter(areaName) {
		FR.Chart.WebUtils.changeParameter(
			'chart1', {
				"area": areaName
			}
		);		
	}
}, 2000);

如下图所示：

2.3.2 联动报表块

点击事件前的编辑按钮，进入 JavaScript 编辑界面。

和联动饼图一样，需新建参数 area ， 参数值选择公式输入：sql("FRDemo","SELECT distinct pid FROM 地图 where pid!=''",1)

输入 JavaScript 代码如下：

setInterval(function() { 
     _g().getWidgetByName('report0').gotoPage(1,"{}",true);
}, 3000); 
//每 3 秒刷新一次报表块并传参

如下图所示：

2.4 预览效果

保存模板，点「PC端预览」，效果如 1.1 预期效果中所示。

注：不支持移动端。

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

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