反馈已提交

网络繁忙

数据刷新后图表排序自动刷新

  • 文档创建者:Catqiu
  • 历史版本:3
  • 最近更新:Catqiu 于 2022-11-24
  • 1. 概述

    1.1 版本

    FineReport 版本
    11.0

    1.2 问题描述

    使用图表排序接口进行排序,当数据源是变动的,数据刷新之后图表不会自动排序。如下图所示:

    2022-11-23_14-26-13.gif

    1.3 解决方案

    开启图表特效的监控刷新功能,并为图表添加初始化后事件。

    2. 示例

    2.1 报表设计

    1)新建决策报表,并新建数据查询,SQL语句为:SELECT * FROM 销量 limit ${int(rand()*5+4)}。

    2)在 body 中添加报表块,并合并 A1~H18 单元格,添加柱形图,如下图所示:
    2022-11-23_15-07-07.png

    2.2 设置图表数据

    设置柱形图数据,选择「单元格元素>数据」,数据来源选择「数据集数据」,数据集为 ds1,分类为「销售员」,系列名使用「字段名」,字段名和系列名为「销量」,汇总方式「求和」,如下图所示:

    2.3 设置图表特效

    选中图表,选择「单元格元素>特效」,开启动画特效,开启后台检测,时间间隔为 2 秒,如下图所示:

    2022-11-23_15-07-07.png

    2.4 添加初始化后事件

    返回 body,选择 Report0,选择「事件」,添加初始化后事件,如下图所示:

    2022-11-23_15-07-07.png

    JS 代码如下:

    注:此方案频繁刷新图表,图表交互可能存在异常,如效果图中每次刷新的时间间隔有细微差别。

    setTimeout(function() {
    var chart = FR.Chart.WebUtils.getChart("A1").vanCharts.charts[0]; 
    // var chart=FR.Chart.WebUtils.getChart("A1","report0").getChartWithIndex(0);//获取报表块中图表对象的另一种写法
    chart.sortChart();
    function sortChartAfterRefresh(chart, sortType) {
    chart._update = chart._update || chart.update;
    chart.update = function() {
    chart._update.call(chart);
    chart.sortChart(sortType);
    chart.sortChart(sortType);
    }
    }
    sortChartAfterRefresh(chart, 1);

    },
    1000)

    2.5 效果预览

    保存报表,选择 PC 端预览,效果如下图所示:

    注:不支持移动端。

    1654862323561683.gif

    3. 模板下载

    点击下载模板:数据刷新后自动排序.frm


    附件列表


    主题: 图表应用
    • 有帮助
    • 没帮助
    • 只是浏览
    中文(简体)

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭

    联系我们
    在线支持
    获取专业技术支持,快速帮助您解决问题
    工作日9:00-12:00,13:30-17:30在线
    页面反馈
    针对当前网页的建议、问题反馈
    售前咨询
    采购需求/获取报价/预约演示
    或拨打: 400-811-8890 转1
    qr
    热线电话
    咨询/故障救援热线:400-811-8890转2
    总裁办24H投诉:17312781526
    提交页面反馈
    仅适用于当前网页的意见收集,帆软产品问题请在 问答板块提问前往服务平台 获取技术支持