圖表排序API

1.1 應用場景

圖表資料展示的順序是由圖表綁定的資料順序決定的，一般建議在 SQL 中排好序再用圖表實現。

但總有些場景不支援提前在 SQL 中排好序，或需要圖表實現動態排序，此時可參考本文方法使用排序API實現。

1.2 功能簡介

FineReport 提供排序API chart.sortChart(sortType) 。

sortType 參數表示排序規則，1 表示升冪，-1 表示降冪，不寫參數則升冪降冪互相切換。

預覽效果如下圖所示：

注1：該方法不支援行動端、不支援擴展圖表。

注2：支援排序的圖表僅包括 柱形圖、條形圖、折線圖、面積圖、餅圖、多層餅圖、儀表盤、雷達圖。

注3：FVS 視覺化看板詳情可見：FVS圖表排序API 。

2.1 準備資料

點選設計器左上角「檔案>建立普通報表」，進入範本後在左下方建立資料庫查詢 ds1，輸入 SQL 語句：SELECT * FROM 銷量。

2.2 設計報表

2.2.1 新增組件

將條形圖和按鈕元件新增至表格中。如下圖所示：

2.2.2 綁定條形圖資料

雙擊條形圖，在右側屬性面板中綁定資料如下圖所示：

2.2.3 設定按鈕元件

1）在右側元件設定中選擇按鈕元件，設定按鈕名稱為「排序」。如下圖所示：

2.2.4 設定排序

在普通報表中，設定排序的方法有些變化，需要在儲存格中新增「按鈕元件」，同樣給按鈕元件設定一個「點選」事件，這裏獲取的是「儲存格」的圖表， JavaScript 程式碼如下：

var chart = FR.Chart.WebUtils.getChart("A1").getChartWithIndex(0); 
// 獲取圖表物件
chart.sortChart(); //排序可切換升降冪

如下圖所示：

2.3 效果預覽

因為新增了元件，這裏需要使用 填報預覽 或 資料分析 預覽模式，效果如下圖所示：

注：不支援行動端。

3.1 設計報表

3.1.1 設定 PC 端自適應屬性

點選頂部菜單欄「範本>PC端自適應屬性」，將報表佈局方式修改為「絕對佈局>雙向自適應」。如下圖所示：

3.1.2 拖入組件

雙擊條形圖，在右側屬性面板中綁定資料如下圖所示：

3.1.3 綁定條形圖資料

雙擊條形圖，在右側屬性面板中綁定資料如下圖所示：

3.1.4 設定按鈕元件

1）選中按鈕元件，設定按鈕名稱為「排序」。如下圖所示：

2）給按鈕元件新增「點選事件」，輸入 JavaScript 程式碼如下：

var chart = FR.Chart.WebUtils.getChart("chart0").getChartWithIndex(0); 
// 獲取圖表物件
chart.sortChart(); //排序可切換升降冪

注：若圖表在報表塊中，只需改變 圖表物件API 的寫法。例如 FR.Chart.WebUtils.getChart("A1","report0")，即獲取 report0 報表塊中 A1 儲存格的圖表。

步驟如下圖所示：

3.2 預覽效果

儲存範本，點選「PC 端預覽」，效果如 1.2 節所示。

注：不支援行動端。

3.3 注意事項

圖表排序API需要在圖表圖形載入完成後執行才有效，那麼某些情況下需要將上述程式碼寫在延時函式 setTimeout( ); 中才能生效。

1）給圖表本身新增「初始化後」事件實現範本預覽時圖表直接排序，需要將程式碼寫在延時函式setTimeout( ); 中。

2）使用參數元件聯動圖表，需要給參數元件新增「編輯後」或「編輯結束」事件，將程式碼寫在延時函式 setTimeout( ); 中。

範例如下：

setTimeout(function(){
var chart = FR.Chart.WebUtils.getChart("chart0").getChartWithIndex(0); 
chart.sortChart(); 
}, 1000);

點選下載範本：

圖表排序API示例.frm

圖表排序API示例.cpt