FVS表格進階排序

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

1.1 版本

1.2 應用場景

製作 FVS 表格時，希望可實現單欄資料或多欄資料按照「升冪」或「降冪」進行展示。例如在一張訂單表格中，「運貨費」按照降冪排列。如下圖所示：

1.3 實現思路

可使用「進階排序」功能實現以下效果：

• 範本預覽後，單欄/多欄按照設定的順序排序。

• 自訂排序。

注：排序更多內容請參見文檔：排序簡介 。

2.1 建立範本

點選設計器左上角「檔案>建立視覺化看板」，建立一張空白看板，可自訂名稱和尺寸。如下圖所示：

2.2 準備資料

建立一個資料庫查詢資料集 ds1，SQL 語句為：SELECT * FROM 訂單。

2.3 設計表格

1）新增一個表格組件，點選「編輯組件」進入表格編輯介面。如下圖所示：

2）如下圖設計表格，將欄位拖到對應儲存格中。如下圖所示：

3）設定重複標題列。如下圖所示：

4）將兩個日期欄位所在儲存格 C2 和 D2 的格式改為日期型，yyyy-MM-dd 樣式。如下圖所示：

5）將 F2 儲存格的格式改為數字，#0.00 樣式，即保留兩位小數。如下圖所示：

2.4 設定排序

1）選中最父格 A2，將其資料設定從分組改為「列表」。如下圖所示：

注：需要保證最父格的資料設定是「列表」，否則排序將不生效。

2）選中 A2 儲存格，點選儲存格元素進階屬性下資料欄排序功能的「新增主要排列序」。如下圖所示：

3）設定排序區域為「運貨費」，排序依據為「儲存格」（也就是根據數字大小來判別升降冪），排序規則為「降冪」。這樣預覽時，按照「運貨費」這一資料欄降冪排序。如下圖所示：

2.5 效果預覽

2.5.1 PC端

點選範本右上角「儲存」按鈕，再點選「預覽」，預覽後的效果如下圖所示。

2.5.2 行動端

預覽方式請參考 FVS行動端預覽 ，效果如下圖所示：

進階排序支援設定多欄排序，也就是可以依賴多個「資料欄」進行組合排序。

例如：希望整體資料按照「訂購日期」欄位降冪排序的同時，相同訂購日期的資料可以按照「運貨費」升冪排序，效果如下圖所示：

此時只需要設定好主要排序和次要排序即可實現。設定方法如下圖所示：

點選下載範本：FVS表格進階排序.fvs

單欄排序、多欄排序分別對應範本中的兩個頁面。