JS獲取決策報表内圖表塊刷新數據

1.1 問題描述

決策報表中，當報表塊和圖表塊之間有聯動且圖表塊的數據來源於報表塊單元格時，當報表塊數據發生變化後，圖表塊數據不會随着變化。如下圖所示：

chart0 聯動 report0 報表塊，chart1 數據來自 report0 報表塊。report0 報表塊數據發生變化後，chart1 不會自動刷新。

如果我們想要實現報表塊數據發生變化後，聯動的圖表塊也會自動刷新，要怎麽做呢？

如下圖所示，report0 報表塊數據發生變化後，chart1 會随着自動刷新。

1.2 實現思路

添加 JS，使用 c.dataRefresh() 圖表刷新接口，實現報表塊數據改變後刷新圖表。

2.1 準備模板

打開内置模板：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\mobile-client\ ChartDelayRefresh_1.frm

點擊可下載模板：ChartDelayRefresh_1.frm

2.2 修改模板

1）将模板中餅圖和柱形圖删掉，替換成餅圖（新特性）和柱形圖（新特性）。餅圖數據設置如下圖所示：

2）柱形圖數據來源爲報表塊 report0 的單元格。如下圖所示：

3）爲餅圖 chart0 添加交互屬性，使點擊餅圖不同分區時，傳遞地區參數 area 給報表塊 report0，從而導緻報表塊數據發生變化。如下圖所示：

至此，模板已實現了chart0 聯動 report0 報表塊，chart1 數據來自 report0 報表塊，但report0 報表塊數據發生變化後，chart1 不會自動刷新。

2.3 增加刷新JS

要實現 report0 報表塊數據發生變化後，chart1 會随着自動刷新，需給餅圖 chart0 增加刷新 JS。如下圖所示：

JavaScript 代碼如下：

setTimeout(function() {
    var c = FR.Chart.WebUtils.getChart("chart1");//獲取圖表塊chart1
    c.dataRefresh();//刷新圖表塊chart1
}, 500);//延遲0.5秒後刷新

2.4 效果預覽

保存模板，點擊「PC端預覽」，PC端效果如下圖所示：

移動端效果如下圖所示：

已完成的模板，可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表單JS實例\21-JS獲取決策報表内圖表塊刷新數據.frm

點擊下載模板：21-JS獲取決策報表内圖表塊刷新數據.frm