历史版本11 :图表开启自动数据点提示轮播接口 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 版本编辑

报表服务器版本  
  10.0


2. 描述编辑

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

3. 接口编辑

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

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

chart.openAutoTooltip([delay, initPoints]);

参数  含义  
  delay  提示切换时间间隔,默认为3s
  initPoints  轮播数据点提示对应的数据点集合,默认为图表内所有数据点


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

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


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

3.3 继续从停止位置播放数据点提示轮播


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

3.4 轮播特定的数据点集合

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


4. 普通报表 cpt编辑

4.1 数据准备

新建工作簿,添加数据库查询 ds1:SELECT * FROM 销量 where 地区 ='华东'


4.2 图表制作

 合并一片单元格(此处合并后的单元格为 A3),插入折线图,数据设置如下:

222

按照需要可在图表属性表中进一步设置图表样式,例如调整配色,坐标轴,字体大小颜色,这里不再一一介绍


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

1)轮播所有的数据点提示


var vanchart =FR.Chart.WebUtils.getChart("A3").getChartWithIndex(0);//获取图表对象
vanchart.openAutoTooltip();//开启数据点提示轮播

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

选中图表,点击特效>交互属性>添加超级链接,添加一个 JavaScript 超链,如下图: 

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

轮播.GIF

2)轮播指定的数据点提示(值大于 400)


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 停止自动数据点提示轮播


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

在 A1 单元格里新增文字“停止数据点提示轮播”,添加 JavaScript 脚本超级链接,点击超链后停止数据点提示轮播,如下图:
222


4.5 继续从停止位置播放数据点提示轮播


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

在 C1 单元格里新增文字“从停止位置播放数据点提示轮播”,添加 JavaScript 脚本超级链接,点击超链后从停止位置播放数据点提示轮播,如下图:
222


5. 决策报表frm编辑

决策报表中,可以新增按钮,给按钮添加点击事件,点击后实现数据点提示自动轮播,例如:

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


或者给图表块新增初始化事件,实现模板预览后,自动实现数据点提示自动轮播,例如:

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

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

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