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

1.1 問題描述

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

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

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

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

1.2 實現思路

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

注：FVS 中要實現相同效果，需使用 refresh API重新整理組件，可參考文檔 FVS圖表實現動態警戒線 。

2.1 準備範本

點選可下載範本：ChartDelayRefresh_1.frm

範本中存在兩個資料集 ds1 和 ds2 ，其中 ds2 資料集中定義了參數 area，表示「地區」。

餅圖 chart0 的系列名作為 area 參數傳遞給報表塊 report0 ，以實現 chart0 聯動 report0 的效果。使點選餅圖不同分割槽時，傳遞地區參數 area 給報表塊，進而導致報表塊資料發生變化。具體設定如下圖所示：

1）將範本中餅圖和柱形圖刪掉，更換成餅圖（新特性）和柱形圖（新特性）。餅圖資料設定如下圖所示：

柱形圖 chart1 資料來源為報表塊 report0 的儲存格資料，具體設定如下圖所示：

該範本已實現了chart0 聯動 report0 報表塊，chart1 資料來自 report0 報表塊，但report0 報表塊資料發生變化後，chart1 不會自動重新整理。

2.2 增加重新整理JS

要實現 report0 報表塊資料發生變化後，chart1 會隨着自動重新整理，需給餅圖 chart0 增加重新整理 JS。如下圖所示：

JavaScript 程式碼如下：

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

2.3 效果預覽

儲存範本，點選「PC端預覽」，PC端效果如下圖所示：

行動端效果如下圖所示：

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