反馈已提交

网络繁忙

当前为10.0版本文档,只有最新版本的文档支持在线编辑修改,如果想创建/编辑文档,请移步至 最新版帮助文档

数据点提示轮播时联动其他组件

  • 文档创建者:cherishdqy
  • 历史版本:14
  • 最近更新:知识库 于 2022-07-06
  • 1. 概述

    1.1 预期效果

    决策报表 中,希望地图数据点提示自动轮播时,可以联动其他图表或报表块。效果如下图所示:

    223A1B87-533C-481F-9F6E-2FD2DE07D3FE.GIF

    1.2 实现思路

    实现数据点提示自动轮播需要调用接口:chart.openAutoTooltip([delay, initPoints]),该接口的详细介绍请参见文档 图表数据点提示自动轮播接口 的说明。

    再通过给 body 添加 JS 事件触发传参并刷新其他组件。

    注:该接口不支持移动端,不支持扩展图表。

    2. 示例

    2.1 准备数据

    点击设计器左上角「文件>新建决策报表」,进入模板后在左下方新建两个数据库查询,查询语句分别为:

    ds1:SELECT * FROM 地图


    ds2:SELECT * FROM 地图 where 1=1 ${if(len(area)=0,""," and pid='"+area+"'")}

    注:参数 area 是联动的关键,地图轮播时通过 area 参数传递地区,使图表数据集中 SQL 获取到该地区的数据,可自定义初始值。

    Snag_6c9f4197.png

    2.2 设计报表

    2.2.1 拖入组件

    向决策报表 body 中拖入地图、饼图和报表块组件。调整布局如下图所示:

    Snag_6ca13691.png

    2.2.2 设计地图

    本例不对地图做过多的样式设置,直接绑定数据即可。

    双击地图,进入编辑状态,绑定地图数据如下图所示:

    Snag_6ca512f9.png

    2.2.3 设计饼图

    1)双击饼图,绑定饼图数据为含有参数的 ds2 数据集。如下图所示:

    Snag_6ca81404.png

    2)设置饼图「样式>标题」为公式 $area ,则饼图标题会根据参数 area 变化。如下图所示:

    Snag_6caade3f.png

    2.2.4 设计报表块

    双击进入报表块,将 ds2 数据集中的字段拖入单元格,自定义标题行即可。如下图所示:

    Snag_6cac6fad.png

    点击报表块界面左下角「表单」按钮返回 body 界面。

    2.3 添加事件

    选中 body,添加两个「初始化后」事件,双击名称分别重命名为「联动报表块」和「联动饼图」。如下图所示:

    Snag_6cb337f1.png

    2.3.1 联动饼图

    点击事件前的编辑按钮,进入 JavaScript 编辑界面。

    首先新建一个参数,参数名为 area ,参数值选择公式,输入:sql("FRDemo","SELECT distinct pid FROM 地图 where pid!=''",1)

    公式说明:获取 FRDemo 数据库中「地图」数据表 pid 字段对应的第 1 列的所有值,且筛除重复和为空的数据。详情可参考 SQL函数 。

    输入 JavaScript 代码如下:

    setTimeout(function() {
    // 第一步, 获取图表对象
    var vanchart = FR.Chart.WebUtils.getChart('chart0').getChartWithIndex(0);
    // 第二步, 筛选出区域名称满足的所有的系列的点, 用于传递给自动数据提示接口
    var points = vanchart.series.reduce(function(points, ser) {
    return points.concat(ser.points);
    }, []).filter(function(point) {
    return area && area.indexOf(point.name) >= 0;
    });
    // 第三步, 保存旧的显示提示方法
    var oldChartShowTooltip = vanchart.showTooltip;
    // 第四步, 重写新的提示方法, 在提示的同时触发联动
    vanchart.showTooltip = function(point) {
    oldChartShowTooltip.apply(vanchart, Array.prototype.slice.call(arguments));
    var areaName = point.name;
    changeParameter(areaName);
    }
    // 第五步, 开启数据点提示自动轮播接口,轮播间隔时间为 3 秒
    vanchart.openAutoTooltip(3000, points);
    // 修改参数, 联动其他图表组件
    function changeParameter(areaName) {
    FR.Chart.WebUtils.changeParameter(
    'chart1', {
    "area": areaName
    }
    );
    }
    }, 2000);

    如下图所示:

    Snag_6cbfd83e.png

    2.3.2 联动报表块

    点击事件前的编辑按钮,进入 JavaScript 编辑界面。

    和联动饼图一样,需新建参数 area , 参数值选择公式输入:sql("FRDemo","SELECT distinct pid FROM 地图 where pid!=''",1)

    输入 JavaScript 代码如下:

    var form = this.options.form; 
    setInterval(function() { 
         form.getWidgetByName('report0').gotoPage(1,"{}",true);
    }, 3000); 
    //每 3 秒刷新一次报表块并传参

    如下图所示:

    2022-07-06_16-26-39.png

    2.4 预览效果

    保存模板,点「PC端预览」,效果如 1.1 预期效果中所示。

    注:不支持移动端。

    3. 模板下载

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\自动轮播数据点提示时联动其他图表.frm

    点击下载模板:数据点提示轮播时联动其他组件.frm

    附件列表


    主题: 图表应用
    已经是第一篇
    已经是最后一篇
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    请前往「服务平台」,选择「在线支持」

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-1278-1526