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

1.1 版本

1.2 问题描述

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

1.3 解决方案

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

2.1 报表设计

1）新建普通报表，新建数据集 ds1，数据库查询语句如下：SELECT * FROM 销量 limit ${int(rand()*5+4)}

2.2 插入图表

合并一片单元格区域，点击上方工具栏插入图表按钮，插入一个「柱形图」。如下图所示：

2.3 设置图表数据

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

2.4 设置图表特效

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

2.5 添加加载起始事件

选择「模板>模板 Web 属性>填报页面设置」，选择「为该模板单独设置」，添加一个「加载结束」事件，如下图所示：

JS 代码如下：

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

注2：决策报表是给报表块添加初始化事件，代码与普通报表相同。

setTimeout(function() {
		var chart = FR.Chart.WebUtils.getChart("A1").vanCharts.charts[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.6 效果预览

保存报表，选择「分页预览」，效果如下图所示：

注3：不支持移动端。

点击下载模板：

数据刷新后自动排序.cpt