1. 概述
適用場景:安裝了「FineVis資料視覺化」插件的使用者,可參考本文了解 FVS 範本的相關功能。
1.1 版本
報表伺服器版本 | 插件版本 |
---|---|
11.0.16 | V1.15.1 |
1.2 應用場景
圖表資料展示的順序是由圖表綁定的資料順序決定的,一般建議在 SQL 中排好序再用圖表實現。
但總有些場景不支援提前在 SQL 中排好序,或需要圖表實現動態排序,此時可參考本文方法使用排序API實現。
1.3 功能簡介
透過 sortChart(sortType) API實現圖表排序。
sortType 參數表示排序規則,1 表示升冪,-1 表示降冪,不寫參數則升冪降冪互相切換。
注:不支援 擴展圖表 類型的圖表。
預覽效果如下圖所示:
2. 範例
2.1 建立範本
點選設計器左上角「檔案>建立視覺化看板」,建立一張空白看板,可自訂範本名稱和尺寸。如下圖所示:
2.2 準備資料
建立資料庫查詢, 輸入 SQL 查詢語句:SELECT * FROM 銷量 。
2.3 新增圖表
1)點選組件區「圖表>條形圖」,並綁定資料如下圖所示:
2)選中條形圖,點選右側配置面板「組件」,設定組件名稱為「條形圖」。如下圖所示:
2.4 新增標題
1)點選組件區的「文字>標題」,建立一個標題,將「標題內容」改為 排序 。如下圖所示:
2)點選標題,給標題新增「點選事件」,輸入JavaScript程式碼如下:
duchamp.getWidgetByName("條形圖").sortChart();//排序可切換升降冪
如下圖所示:
2.5 效果預覽
2.5.1 PC 端
點選範本右上角「儲存」按鈕,再點選「預覽」,預覽後的效果如 1.3 節所示。
2.5.2 行動端
預覽方式請參考 FVS行動端預覽 ,效果如下圖所示:
3. 範本下載
點選下載範本:FVS圖表排序API.fvs