历史版本2 :图表排序后缩放浏览器失效 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 版本

FineReport 版本
11.0

1.2 问题描述

决策报表使用 图表排序接口 进行排序,JS代码写在图表的初始化后事件中,初次预览正常排序,缩小浏览器窗口后排序失效。

1654862295227139.gif

1.3 解决方案

1)方法一:为图表添加初始化后事件, window.onresize() 事件,即在浏览器窗口大小发生调整时就会执行。

2)方法二:为 body 添加初始化后事件, window.onresize() 事件,即在浏览器窗口大小发生调整时就会执行。

2. 示例编辑

打开报表:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\GraphSwitching\图表排序.frm

2.1 方法一

1)选中图表组件,点击「事件」,添加初始化事件,如下图所示:

2022-11-23_13-45-09.png

JS 代码如下:

注: 这里重复执行两次 chart.sortChart() 的原因是保证排序规则不变,在调整窗口大小后可以保持最开始的排序规则,即始终升序或者降序。

window.onresize = function() {
setTimeout(function() {
var chart = FR.Chart.WebUtils.getChart("chart0").getChartWithIndex(0);
chart.sortChart();
chart.sortChart();
}, 2000);
}

2)保存报表,选择 PC 端预览,效果如下:

1654862295227139.gif

2.2 方法二

1)选中 body,点击「事件」,添加初始化事件,如下图所示:

注:仅适用于新自适应。

2022-11-23_13-45-09.png

JS 代码如下:

window.onresize = function() {
setTimeout(function() {
var chart = FR.Chart.WebUtils.getChart("chart0").getChartWithIndex(0);
chart.sortChart();
chart.sortChart();
}, 2000);
}

2)保存报表,选择 PC 端预览,效果与 2.1 节相同。

3. 模板下载编辑