自动轮播数据点提示时联动其他图表

  • 文档创建者:cherishdqy
  • 编辑次数:10次
  • 最近更新:Leo.Tsai 于 2021-01-05
  • 1. 概述

    1.1 预期效果

    地图自动播放数据点提示时,可以联动其他图表,效果如下图所示:

    33C57FC9-788C-4B39-9E1F-9BF45C638F9B.GIF

    1.2 实现思路

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

    2. 示例

    2.1 准备数据

    1)新建决策报表,新建数据集地图,SQL 语句为:SELECT * FROM 地图

    Snag_342d457c.png

    2)新建数据集图表,SQL 语句为:SELECT * FROM 地图 where 1=1 ${if(len(area)=0,""," and pid='"+area+"'")}

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

    Snag_342e8e0a.png

    2.2 插入图表

    拖入三个图表组件:地图、饼图、柱形图,如下图所示:

    1606378847772601.png

    地图和图表在数据和样式上的设置此处不详细介绍,下面主要讲下如何实现轮播提示点时可以联动图表。

    2.3 添加事件

    选中 body,添加一个初始化后事件,如下图所示:

    1606379104623716.png

    在初始化事件的参数界面处,新建一个 area 参数,参数值使用公式:sql("FRDemo","SELECT distinct pid FROM 地图 where pid!=''",1)


    JavaScript 代码如下:

    setTimeout(function() {

    var autoTooltipDelay = 3; // 默认3s播放一个提示.

    // 第一步, 拿图表实例.
    var vanchart = FR.Chart.WebUtils.getChart('地图').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);
    }

    // 第五步, 使用轮播提示接口触发轮播数据提示
    vanchart.openAutoTooltip(autoTooltipDelay * 1000, points);

    // 修改参数, 联动其他图表或者组件.
    function changeParameter(areaName) {
    /*刷新饼图*/
    FR.Chart.WebUtils.changeParameter(
    '饼图', {
    "area": areaName
    }
    );
    /*刷新柱形图*/
    FR.Chart.WebUtils.changeParameter(
    '柱形图', {
    "area": areaName
    }
    );
    }

    }, 2000);

    2.4 预览效果

    保存模板,点击表单预览,效果如1.1预期效果中所示。

    注:不支持移动端。

    3. 模板下载

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

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

    附件列表


    主题: 图表应用
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!