擴展圖表組件重新整理

1.1 問題描述

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

1.2 實現思路

JS 實現圖表組件重新整理時，普通圖表採用的是dataRefresh()這個接口，但是擴展圖表不支援dataRefresh()，擴展圖表可以用dealReloadChartAjax()這個接口實現單個組件重新整理。

2.1 資料準備

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

2.2 報表設計

1）將三個組件：報表塊report0、餅圖chart0屬性設定chart0、擴展圖表-輪播夜光儀表盤chart1分別拖拽到決策報表設計主體中，排版如下圖所示：

2）餅圖chart0屬性設定

點選餅圖的編輯按鈕，在右下方屬性面板，如下圖綁定內建資料集資料。

點選「特效>互動屬性」，新增一個當前表單物件的超級連結，點選編輯按鈕。

表單物件下拉選擇報表塊report0，新增一個area參數，其值插入公式SERIES，以便後面的步驟實現點選圓形圖可以聯動報表塊，改變報表塊的資料。

點選「特效>互動屬性」，新增一個JavaScript的超級連結，重命名為監控重新整理，點選編輯按鈕。

插入如下 JS 代碼：

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

3）報表塊report0設計

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

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

4）擴展圖表-輪播夜光儀錶盤chart1屬性設定

儀錶盤綁定報表塊中的儲存格資料，插入公式如下：

播放維度：report0~B2

指標值：report0~C2

目標值：report0~D2

2.3 效果預覽

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

注：不支援行動端預覽。

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