FVS圖表排序接口

適用場景：安裝了「FineVis資料視覺化」插件的使用者，可參考本文了解 FVS 範本的相關功能。

1.1 版本

1.2 應用場景

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

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

1.3 功能簡介

透過 sortChart(sortType) API實現圖表排序。

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

注：不支援 擴展圖表 型別的圖表。

預覽效果如下圖所示：

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行動端預覽 ，效果如下圖所示：