图表开启自动数据点提示轮播接口

编辑
  • 文档创建者:susie
  • 浏览次数:3580次
  • 编辑次数:11次
  • 最近更新:Leo.Tsai 于 2019-06-17
  • 1. 版本

    报表服务器版本  
      10.0


    2. 描述

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

    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),插入折线图,数据设置如下:


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


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

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


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

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

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


    开启自动数据点提示需在预览页面点击图表,由于模板中数据点提示自动切换采用的是默认时间间隔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 脚本超级链接,点击超链后停止数据点提示轮播,如下图:


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


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

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


    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。

    附件列表


    主题: 图表应用
    标签: 暂无标签 编辑/添加标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]