1. 概述
1.1 预期效果
决策报表 中，希望地图数据点提示自动轮播时，可以联动其他图表或报表块。效果如下图所示：
1.2 实现思路
实现数据点提示自动轮播需要调用接口：chart.openAutoTooltip([delay, initPoints])，该接口的详细介绍请参见文档 图表数据点提示自动轮播接口 的说明。
再通过给 body 添加 JS 事件触发传参并刷新其他组件。
注：该接口不支持移动端，不支持扩展图表。
2. 示例
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 代码如下：
var form = this.options.form;
setInterval(function() {
form.getWidgetByName('report0').gotoPage(1,"{}",true);
}, 3000);
//每 3 秒刷新一次报表块并传参
如下图所示：
2.4 预览效果
保存模板，点「PC端预览」，效果如 1.1 预期效果中所示。
注：不支持移动端。
3. 模板下载
已完成模板可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\自动轮播数据点提示时联动其他图表.frm
点击下载模板：数据点提示轮播时联动其他组件.frm