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

编辑
  • 文档创建者:susie
  • 浏览次数:5949次
  • 编辑次数:27次
  • 最近更新:Wendy123456 于 2019-10-11
  • 1. 版本

    报表服务器版本  
      10.0

    2. 描述

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

    3. 接口

    使用之前先获取需要操作的 图表对象 ,然后调用改图表对象的 openTooltip 方法即可开启图表数据点提示自动播放的功能。

    chart.openAutoTooltip([delay, initPoints]);

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

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

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

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

    4. 示例一:普通报表

    4.1 数据准备

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

    4.2 图表制作

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

    1570670993584571.png

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

    1570697624688482.png

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

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

    4.3.1 轮播所有的数据点提示

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

    1570696361170689.png
    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 脚本」超级链接,点击超链后停止数据点提示轮播,如下图所示:
    1570696306617008.png

    JS 代码如下所示:

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

    4.5 继续数据点提示轮播

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

    1570696782656429.png

    JS 代码如下所示:

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

    注:该方法不支持移动端。

    4.6 效果预览

    保存模板,点击分页预览,效果如下所示:

    1570760338790576.gif

    5. 示例二:决策报表

    5.1 添加数据集

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

    5.2 模板设置

    1)将「折线图」图表拖进新建的决策报表中,如下图所示:

    1570676387431156.png

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

    1570673764512677.png

    5.3 添加事件

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

    1570674224809089.png

    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. 模板下载

    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

    附件列表


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

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

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