实现自动数据点提示轮播，并且轮播的时候高亮显示对应的数据点

3.1 开启自动数据点提示轮播

使用之前先获取需要操作的 图表对象

chart.openAutoTooltip([delay, initPoints]);

3.2 停止自动数据点提示轮播

在调用该方法后，会返回一个用于关闭自动轮播数据点提示的 controller，通过controller.stop()方法，即可停止当前的轮播数据点提示自动播放，如：

var controller = chart.openAutoTooltip();  // 开启自动数据点提示轮播
controller.stop(); // 停止自动轮循播放数据点提示

3.3 轮播特定的数据点集合

如果想要指定轮播间隔和需要显示数据点提示的数据点集合，则可以追加可选参数，关于获取指定数据点集合，可以参考 获取图表内特定的数据点对象

4.1 数据准备

选择文件>新建普通报表，添加数据集 ds1：SELECT * FROM 销量 where 地区 ='华东'

4.2 图表制作

 1）合并一片单元格，此处合并后的单元格为 A3 。鼠标右键点击 A3 单元格，选中单元格元素>插入图表>折线图，如下图所示：

2）鼠标左键点击插入的折线图，在属性面板右侧选中「数据」，为折线图设置数据。如下图所示：

根据实际需要可在属性面板右侧「样式」中进一步设置图表样式，例如调整配色，坐标轴，字体大小颜色等，这里不再详细介绍。

4.3 开启自动数据点提示轮播

4.3.1 轮播所有的数据点提示

在 A1 单元格里新增文字「开启数据点提示轮播」，选中 A1 单元格，在右侧属性面板中点击 超级链接>添加链接，添加「JavaScript 脚本」超级链接，点击超链后开始数据点提示轮播，如下图：

JS 代码如下所示：

//获取图表对象
var vanchart =FR.Chart.WebUtils.getChart("A3").getChartWithIndex(0);
// 开启数据提示轮播, 并将轮播控制器绑定到图表对象上
vanchart.controller = vanchart.openAutoTooltip();

注：获取图表块对象 FR.Chart.WebUtils.getChart("chartID") 中的 chartID 为当前图表的单元格序号，如上“A3”。

由于模板中数据点提示自动切换采用的是默认时间间隔3S，所以在点击图表后需等待 3S 才会出现动画效果，如果用户想要更改时间间隔可修改 chart.openAutoTooltip([delay, initPoints]) 中的「delay」参数。

保存模板，点击分页预览。点击「开启数据点提示轮播」，开启数据点提示如下图：

4.3.2 轮播指定的数据点提示（值大于 400）

用户若想实现此效果，步骤与本文 4.3.1 章节相同。

var vanchart =FR.Chart.WebUtils.getChart("A3").getChartWithIndex(0);//获取图表对象
var points = []; 
vanchart.series.forEach(function (ser){//获取所有的数据提示点
    points = points.concat(ser.points);
}) 
points = points.filter(function (p){//筛选大于 400 的数据提示点
    return p.value > 400;
})
var delay=1000//切换时间间隔为1秒
vanchart.openAutoTooltip(delay,points);//开启数据点提示轮播

4.4 停止自动数据点提示轮播

在 B1 单元格里新增文字「停止数据点提示轮播」，选中 B1 单元格，在右侧属性面板中点击 超级链接>添加链接，添加「JavaScript 脚本」超级链接，点击超链后停止数据点提示轮播，如下图所示：

JS 代码如下所示：

//获取图表对象
var vanchart =FR.Chart.WebUtils.getChart("A3").getChartWithIndex(0);
// 停止自动轮循播放数据点提示
vanchart.controller.stop();

4.5 继续数据点提示轮播

在 C1 单元格里新增文字「继续数据点提示轮播」，选中 C1 单元格，在右侧属性面板中点击 超级链接>添加链接，添加「JavaScript 脚本」超级链接，点击超链后继续数据点提示轮播，如下图所示：

JS 代码如下所示：

//获取图表对象
var vanchart =FR.Chart.WebUtils.getChart("A3").getChartWithIndex(0);
//继续从停止位置播放数据点提示轮播
vanchart.controller.moveOn(); 

5.1 添加数据集

选择文件>新建决策报表，添加数据集 ds1: SELECT * FROM 销量 where 地区 ='华东'

5.2 模板设置

1）将「折线图」图表拖进新建的决策报表中，如下图所示：

2）鼠标左键点击报表设计主体中央的「编辑 」，在属性面板右侧选中「数据」， 为折线图设置数据。如下图所示：

5.3 添加事件

在属性面板右侧，点击控件设置>chart0>事件，添加「初始化后」事件，如下图所示：

JS 代码如下所示：

setTimeout(function(){
var vanchart =FR.Chart.WebUtils.getChart("chart0").getChartWithIndex(0);
vanchart.openAutoTooltip();
},3000) 

在决策报表中，还可以新增按钮，给按钮添加「点击事件」，点击后实现数据点提示自动轮播，JS 代码如下所示：

var vanchart =FR.Chart.WebUtils.getChart("chart0").getChartWithIndex(0);
vanchart.openAutoTooltip();

注：由于决策报表里没有加载结束后事件，只有初始化后事件，但是我们需要在决策报表加载结束后再执行这段代码，因此我们在代码前面加上setTimeout()延时函数。

注：3000ms 代表的是事件加载结束后的时间，如果数据量庞大导致报表生成过慢，测试一下加载报表所需时间，换算成毫秒后，将 3000 替换。例如：报表加载需要 15s，那么当前代码后面延迟的 3000 需要改成 15000 。

5.4 效果预览

保存模板，点击表单预览，即可实现本文第二章「描述」中的效果。

6.1 示例一：普通报表

已完成的模板，请参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\图表数据点提示自动轮播-示例一.cpt

点击下载模板：图表数据点提示自动轮播-示例一.cpt

6.2 示例二：决策报表

已完成的模板，请参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\图表数据点提示自动轮播-示例二.frm

点击下载模板：图表数据点提示自动轮播-示例二.frm