1. 描述
用户在报表中可以通过 js 获取图表对象，如何获取详细点击 [新] 图表接口，并且触发某个数据的选中状态，数据点提示，实现自动播放数据点提示效果。
此处以普通报表为例，决策报表实现方法可参考：[新] 自动循环播放数据点提示
2. 示例
2.1 数据准备
新建工作簿，添加数据库查询 ds1:SELECT * FROM 销量 where 地区 ='华东'
2.2 图表制作
合并一片单元格（此处合并后的单元格为 A3），插入折线图，数据设置如下：
按照需要可在图表属性表中进一步设置图表样式，例如调整配色，坐标轴，字体大小颜色，这里不再一一介绍
2.3 插入按钮控件
在图表上方插入两个按钮控件，按钮名称分别为【开启数据点提示轮播】和【关闭数据点提示轮播】
给第一个按钮添加点击事件，点击按钮使第一个系列下的提示点实现自动轮播：
var vanchart = FR.Chart.WebUtils.getChart('A3').vanCharts.charts[0],
openAutoTooltipCarouselDelay = 1000;
openAutoTooltipCarousel();
function openAutoTooltipCarousel(ele){
var series = vanchart.series; // 获取 chart 下的所有系列
// 获取系列第一个系列的所有数据点
// 注意，每次只能显示一个数据点提示，如果需要显示多个数据点的提示内容，可以在 plotOptions 里面开启数据提示共享
var points = series[0].points,
pointsLen = points.length;
// 默认的提示轮播从第一个点开始
var pointIndex = 0;
window.openAutoTooltipCarouselTimer = setInterval(function (){
// 遍历 series 下面每个系列的点
// 使用 vanchart.showTooltip 依次展示不同索引的数据点
vanchart.showTooltip(points[pointIndex]);
pointIndex < pointsLen - 1 ? pointIndex++ : pointIndex = 0;
}, openAutoTooltipCarouselDelay)
}
给第二个按钮添加点击事件，点击按钮使提示点结束轮播：
var vanchart = FR.Chart.WebUtils.getChart('A3').vanCharts.charts[0];
// 获取图表对象
closeAutoTooltipCarousel();
function closeAutoTooltipCarousel(){
clearInterval(window.openAutoTooltipCarouselTimer);
vanchart.hideTooltip();
// 关闭数据点提示
}
2.4 保存与预览
保存模板，点击填报预览，点击【开启数据点提示轮播】按钮即可实现如上效果。
在线查看模板效果请点击：提示点轮播折线图. cpt
已完成模板可参考：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\NewLineChart \ 提示点轮播折线图. cpt
2.5 轮播所有数据点提示
将第一个按钮中的 js 代码修改如下，即可实现所有系列下地提示点轮播：
var vanchart = FR.Chart.WebUtils.getChart('A3').vanCharts.charts[0],
openAutoTooltipCarouselDelay = 1000;
openAutoTooltipCarousel();
function openAutoTooltipCarousel(ele){
var series = vanchart.series, allPoints = []; // 获取 chart 下的所有系列和所有数据点
// 把所有系列的点连接到新数组 allPoints
for(var i = -1; ++i <series.length;){
allPoints = allPoints.concat(series[i].points);
}
pointsLen = allPoints.length;
// 默认的提示轮播从第一个点开始
var pointIndex = 0;
window.openAutoTooltipCarouselTimer = setInterval(function (){
// 遍历 series 下面每个系列的点
// 使用 vanchart.showTooltip 依次展示不同索引的数据点
vanchart.showTooltip(allPoints[pointIndex]);
pointIndex < pointsLen - 1 ? pointIndex++ : pointIndex = 0;
}, openAutoTooltipCarouselDelay)
}
