FVS實現元件聯動並查詢

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

1.1 版本

1.2 應用場景

在 FVS視覺化看板中，希望實現有多個元件時，後一個元件的選項能根據前一個元件選擇的值變化，並且在選擇相應的選項後，其他組件內容能隨之變化展示相應的資料。

如下圖所示，城市選項需跟隨地區所選值而變動，客戶選項需跟隨地區、城市所選值相應變動，表格內容能跟隨選擇的地區、城市、客戶自動查詢出相應資料。

1.3 實現思路

透過在資料集中定義資料集參數，再在畫布中新增元件，元件綁定帶有參數的資料字典時，即可實現後面元件根據前面元件資料進行過濾。

透過給儲存格新增過濾條件實現表格資料自動查詢。

2.1 建立範本

1）在 FineReport 設計器左上角點選「檔案>建立視覺化看板」。

2）在「建立空白看板」Tab 中，可自訂範本名稱和尺寸，選擇 範本樣式 為「內建樣式>深色主題一」。

3）點選「建立看板」。

2.2 資料準備

建立三個資料庫查詢，SQL 查詢語句分別為：

訂單：select 客戶.地區,客戶.城市,客戶.客戶ID,客戶.公司名稱,訂單.訂單ID,訂單.訂購日期,訂單.發貨日期,訂單.到貨日期,訂單.運貨商,貨主名稱,訂單明細.產品ID,(訂單明細.單價*訂單明細.數量) AS 金額 from 客戶,S訂單 訂單,S訂單明細 訂單明細 where 訂單.訂單ID=訂單明細.訂單ID and 客戶.客戶ID=訂單.客戶ID

城市：select 城市 from 客戶 where 地區='${area}'

客戶：select 公司名稱 from 客戶 where 城市='${city}' and 地區='${area}'

「訂單」資料集主要將不同的資料表進行了聯動；「城市」資料集定義了地區參數 $area ，表示根據參數獲取對應的「城市」；「客戶」資料集定義了城市參數 $city 和 地區參數 $area，表示根據參數獲取對應的「公司名稱」。

以訂單為例，如下圖所示：

2.3 設計視覺化看板

1）向畫布中拖入四個「標題」組件、三個「下拉框」元件和一個「表格」組件，並調整組件位置。如下圖所示：

2）分別設定「標題」組件「標題內容」為 地區：、城市：、客戶：，下圖為地區範例。

「下拉框」組件「綁定參數」分別為 area 、city 、customer，將下拉框元件與各個參數綁定，下圖為area參數範例。

注：必須保證下拉框「綁定參數」與參數名稱一致。

3）設定三個「下拉框」元件的選項值來源，具體設定如下表所示：

以 area 元件為例，步驟如下圖所示：

2.4 設計表格

2.4.1 設計表格樣式

1）選中「標題」，在「標題內容」中設標度題為「運貨商月訂單資訊」如下圖所示：

2）選中表格組件，點選右側的「編輯組件」，進入表格編輯介面，如下圖所示：

3）將「訂單」資料集中的 訂單ID、公司名稱、訂購日期、貨主名稱、發貨日期、到貨日期、運貨商 依次拖入 A2~G2 儲存格，再輸入對應表頭資訊。如下圖所示：

4）因為 G2 儲存格的「運貨商」欄位在「訂單」資料集中實際上是「運貨商ID」的欄位值，所以這裏需要設定其形態為資料字典，使其顯示「運貨商ID」對應的「公司名稱」。

選中 G2 儲存格，點選「儲存格屬性>形態」，設定為「資料字典」，將其顯示值設為「運貨商」表中的「公司名稱」欄位。如下圖所示：

2.4.2 設定過濾

由於表格中的資料與下拉框選項值來源綁定的資料並不是來源於同一個資料集，它們之間不存在過濾關係，所以需要手動為儲存格新增過濾條件。

雙擊「訂單 ID」所在的 A2 儲存格，彈出資料欄設定介面，選擇「過濾」介面，新增三個過濾條件，條件之間用 AND 連結：

條件一：地區 列等於 F(x) if(len($area)== 0,nofilter,$area)

條件二：城市 列等於 F(x) if(len($city)== 0,nofilter,$city)

條件三：公司名稱 列等於 F(x) if(len($customer)==0,nofilter,$customer)

注1：參數 $customer 可以直接引用「下拉框元件」customer 的值。

注2：公式中 nofilter 是不過濾的意思，即參數為空時不過濾顯示全部資料，參數不為空時，顯示出相應資料。

如下圖所示：

2.5 效果預覽

2.5.1 PC 端

儲存報表，點選「預覽」，效果如 1.2 節應用場景所示。

2.5.2 行動端

行動端請自行組合並開啟 行動端佈局，預覽方式請參考 FVS行動端預覽 。效果如下圖所示：

點選下載範本：FVS實現元件聯動並查詢.fvs