历史版本2 :数据刷新后图表排序自动刷新 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

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 端预览,效果如下图所示:

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

3. 模板下载编辑

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