JS實現報表塊資料變化後重新整理聯動的圖表塊

1.1 問題描述

決策報表中，當報表塊和圖表塊之間有聯動且圖表塊的資料來源於報表塊儲存格時，當報表塊資料發生變化後，圖表塊資料不會隨著變化。如下圖所示：

chart0 聯動 report0 報表塊，chart1 資料來自 report0 報表塊。report0 報表塊資料發生變化後，chart1 不會自動重新整理。

如果我們想要實現報表塊資料發生變化後，聯動的圖表塊也會自動重新整理，要怎麼做呢？

如下圖所示，report0 報表塊資料發生變化後，chart1 會隨著自動重新整理。

1.2 實現思路

新增 JS，使用 c.dataRefresh() 圖表重新整理接口，實現報表塊資料改變後重新整理圖表。接口詳細介紹可參考：圖表重新整理API

2.1 準備範本

點選可下載範本：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端效果如下圖所示：

行動端效果如下圖所示：

點選下載範本：21-JS獲取決策報表內圖表塊重新整理資料.frm