JS实现报表块数据变化后刷新联动的图表块

发布时间：2026-03-26 21:38

V11.5.1 版本起，设计器中取消「新建决策报表」入口，历史决策报表模板仍可正常编辑与访问。更推荐使用 FineVis数据可视化，作为专业的数据可视化工具，比决策报表制作可视化看板效率更高、效果更丰富。

1. 概述

决策报表中，当报表块和图表块之间有联动且图表块的数据来源于报表块单元格时，当报表块数据发生变化后，图表块数据不会随着变化。如下图所示：

chart0 联动 report0 报表块，chart1 数据来自 report0 报表块。report0 报表块数据发生变化后，chart1 不会自动刷新。

如果我们想要实现报表块数据发生变化后，联动的图表块也会自动刷新，要怎么做呢？

如下图所示，report0 报表块数据发生变化后，chart1 会随着自动刷新。

添加 JS，使用 c.dataRefresh() 图表刷新接口，实现报表块数据改变后刷新图表。接口详细介绍可参考：图表刷新接口

注：FVS 中要实现相同效果，需使用 refresh 接口刷新组件，可参考文档 FVS图表实现动态警戒线。

点击可下载模板：ChartDelayRefresh_1.frm

模板中存在两个数据集 ds1 和 ds2 ，其中 ds2 数据集中定义了参数 area，表示「地区」。

饼图 chart0 的系列名作为 area 参数传递给报表块 report0 ，以实现 chart0 联动 report0 的效果。使点击饼图不同分区时，传递地区参数 area 给报表块，从而导致报表块数据发生变化。具体设置如下图所示：

柱形图 chart1 数据来源为报表块 report0 的单元格数据，具体设置如下图所示：

该模板已实现了chart0 联动 report0 报表块，chart1 数据来自 report0 报表块，但report0 报表块数据发生变化后，chart1 不会自动刷新。

要实现 report0 报表块数据发生变化后，chart1 会随着自动刷新，需给饼图 chart0 增加刷新 JS。如下图所示：

JavaScript 代码如下：

setTimeout(function() {
var c = FR.Chart.WebUtils.getChart("chart1");//获取图表块chart1
c.dataRefresh();//刷新图表块chart1
}, 500);//延迟0.5秒后刷新

保存模板，点击「PC端预览」，PC端效果如下图所示：

移动端效果如下图所示：