反饋已提交

網絡繁忙

圖表排序API

1. 概述

1.1 應用場景

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

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

1.2 功能簡介

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

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

預覽效果如下圖所示:

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

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

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


2. 決策報表範例

2.1 準備資料

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


2.2 設計報表

2.2.1 設定 PC 端自適應屬性

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


2.2.2 拖入組件

將條形圖和按鈕元件拖入 body 中。如下圖所示:


2.2.3 綁定條形圖資料

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

2.2.4 設定按鈕元件

1)選中按鈕元件,設定按鈕名稱為「排序」。如下圖所示:


2)給按鈕元件新增「點選事件」,輸入 JavaScript 程式碼如下:

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

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

步驟如下圖所示:


2.3 預覽效果

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

注:不支援行動端。

2.4 注意事項

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

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

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

範例如下:

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

3. 普通報表範例

用第 2 章相同的圖表資料,簡單示範在普通報表中如何設定排序,設計報表部分不再贅述。

3.1 設定排序

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

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

如下圖所示:


3.2 效果預覽

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

注:不支援行動端。


4. 範本下載

附件列表


主題: 圖表應用
  • 有幫助
  • 沒幫助
  • 只是瀏覽
  • 圖片不清晰
  • 用語看不懂
  • 功能說明看不懂
  • 操作說明太簡單
  • 內容有錯誤
中文(繁體)

滑鼠選中內容,快速回饋問題

滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。

不再提示

10s後關閉

獲取幫助
線上支援
獲取專業技術支援,快速幫助您解決問題
工作日9:00-12:00,13:30-17:30在线
頁面反饋
針對當前網頁的建議、問題反饋
售前咨詢
業務咨詢
電話:0933-790886或 0989-092892
郵箱:taiwan@fanruan.com
頁面反饋
*問題分類
不能為空
問題描述
0/1000
不能為空

反馈已提交

网络繁忙