擴展圖表組件重新整理

1.1 應用場景

擴展圖表單個組件重新整理的實現方法跟普通圖表有所不同，因而單獨拿出來詳細介紹下。

1.2 實現思路

JS 實現圖表組件重新整理時，普通圖表使用的是 dataRefresh() 這個API，擴展圖表需使用 dealReloadChartAjax() API實現。

注：在 FVS視覺化看板中，圖表重新整理請直接使用組件重新整理API Refresh 。

2.1 資料準備

建立一張決策報表，建立內建資料集Embedded1，詳細資料如下圖所示：

2.2 新增組件

將三個組件：報表塊、餅圖、擴展圖表-輪播夜光儀表盤，分別拖曳到決策報表設計主體中，排版如下圖所示：

2.3 設定報表塊

如下圖設計報表塊樣式，A2~D2 綁定和標題相同的欄位即可。

雙擊 A2 儲存格，新增一個過濾條件，地區欄位綁定餅圖中的參數 $area，如下圖所示：

2.4 圖表綁定資料

1）選中餅圖，雙擊進入編輯狀態，在右下方屬性面板，如下圖綁定內建資料集資料。

2）選中輪播夜光儀表盤，儀表盤綁定報表塊中的儲存格資料，插入公式如下：

播放維度：=report0~B2

指標值：=report0~C2

目標值：=report0~D2

2.5 設定超級連結

1）雙擊編輯餅圖，點選「特效>交互屬性」，新增一個「當前表單物件」的超級連結，點選「編輯」按鈕。

表單物件下拉選擇報表塊「report0」，新增 area 參數，參數值選擇「系列名稱」，以便後面的步驟實現點選餅圖可以聯動報表塊，改變報表塊的資料。

2）重新整理增一個 JavaScript 的超級連結，重新命名為監視重新整理，點選「編輯」按鈕。插入如下 JS 程式碼：

var c=FR.Chart.WebUtils.getChart("chart1");
c.dealReloadChartAjax();

2.6 效果預覽

報表決策報表，點選「PC端預覽」，組件重新整理效果如下圖所示：

注：不支援行動端預覽。

已完成範本可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\frm\擴展圖表監視重新整理.frm

點選下載範本：擴展圖表監控重新整理.frm