FVS組件點擊聯動

適用場景：安裝了「FVS企業戰情室編輯模式」插件的使用者，可參考本文了解 FVS 範本的相關功能。

注：不支援行動端。

1.1 版本

1.2 應用場景

在 FVS 企業戰情室範本中，組件支援透過點選操作，傳遞參數以聯動其他組件。例如以下場景：

• 使用 標題組件 用作按鈕，點選聯動其他組件。

• 使用圖表組件，點選圖表的分類或系列，聯動其他組件。

• 使用表格組件，點選儲存格內容，聯動其他圖表或表格。 
  

效果如下圖所示：

1.3 功能簡介

1.3.1 組件聯動交互事件

注：部分組件不支援「點選事件」，詳情可參考文檔 FVS組件交互屬性 。

使用標題組件、圖表組件聯動其他組件時，可選中組件，點選右側配置區「交互>交互事件>新增事件>滑鼠點選」，設定點選事件的組件聯動執行動作。

1）選中組件，點選右側配置區「交互>交互事件>新增事件>滑鼠點選」，即可新增一個滑鼠點選事件。

2）選擇「組件聯動」，即可在此點選事件中新增一個組件聯動的執行動作，在彈出的執行動作設定框中可設定動作名稱、聯動範圍、聯動物件及參數。如下圖所示：

設定項具體說明如下表：

1.3.2 表格儲存格超級連結

V1.7.1 及之後版本的插件中，表格組件儲存格超級連結支援「當前頁面物件」，僅支援聯動同一分頁的 圖表組件 或 表格組件。

注1：若儲存格中插入了圖表，要使用圖表「特效」中的超連結當前頁面物件，需要將 FineReport 設計器升級到 11.0.8.1 版本。

• 儲存格超級連結

• 儲存格圖表超級連結

2.1 建立範本

1）點選設計器菜單欄「檔案>建立視覺化看板」，建立一張空白看板。如下圖所示：

2）根據實際需要自訂視覺化看板名稱、畫布大小、範本樣式，點選「建立範本」。如下圖所示：

2.2 準備資料

1）建立資料庫查詢 ds1，SQL 查詢語句為：SELECT * FROM 銷量 ，表示區銷量表中所有資料。如下圖所示：

2）同理，建立資料庫查詢 ds2 ，SQL 查詢語句為：SELECT * FROM 銷量  ${if(len(area) == 0,"","where 地區 = '" + area + "'")}。表示若地區參數 $area 為空，則取銷量表中全部資料，否則按照 $area 獲取資料。如下圖所示：

2.3 新增組件

1）向畫布中新增一個餅圖、一個柱形圖、兩個表格以及四個標題組件。以餅圖為例，如下圖所示：

2）調整組件位置及大小，餅圖 和 表格1 為設定超連結的物件，柱形圖 和 表格2 為被聯動物件，佈局如下圖所示：

3）4 個標題組件的組件內容分別設定為「餅圖、柱形圖、表格1、表格2」。以「餅圖」標題組件為例，如下圖所示：

4）餅圖、柱形圖、表格1、表格2 的組件名稱分別設定為「餅圖、柱形圖、表格1、表格2」。以 餅圖組件 為例，如下圖所示：

2.4 設定組件內容

2.3.1 餅圖和柱形圖

1）選中畫布中的餅圖組件和柱形圖組件，在右側配置區設定組件內容。

2）餅圖組件綁定沒有參數的 ds1 資料集，分類為「無」，系列名使用「欄位值」，系列名為「地區」，值為「銷量」。

3）柱形圖組件綁定設定了參數 $area 的 ds2 資料集，分類為「地區」，系列名使用「欄位值」，系列名為「產品」，值為「銷量」。如下圖所示：

2.3.2 表格1

1）選中畫布中的「表格1」，點選右側配置區「內容>編輯組件」，進入組件編輯介面。如下圖所示：

2）A1、B1 儲存格輸入正文內容，A2、B2 儲存格分別拖入 ds1 資料集中的 地區 、銷量 欄位，字體樣式等可自行設定。如下圖所示：

3）選中 B2 儲存格，銷量 欄位的資料設定修改為「匯總>求和」。如下圖所示：

4）合併一片儲存格。如下圖所示：

5）在合併的儲存格區域插入一個餅圖。如下圖所示：

6）餅圖組件綁定沒有參數的 ds1 資料集，分類為「無」，系列名使用「欄位值」，系列名為「地區」，值為「銷量」。如下圖所示：

7）設定餅圖的標題、圖例不可見，勾選「使用標籤」，使其顯示「系列名」，方便我們直覺的看到餅圖系列。如下圖所示：

8）設定完成後點選範本左上方的「傳回視覺化看板」即可傳回看板。

2.3.3 表格2

1）選中畫布中的「表格2」，點選右側配置區「內容>編輯組件」，進入表格編輯介面。如下圖所示：

2）A1-C1 儲存格輸入正文內容，A2-C2 儲存格拖入 ds2 資料集中的 地區、產品、銷量 欄位，字體樣式等可自行設定。如下圖所示：

3）選中 C2 儲存格，銷量欄位的資料設定修改為「匯總>求和」。如下圖所示：

4）設定完成後點選範本上方「傳回視覺化看板」即可傳回看板。

2.5 設置組件聯動

2.5.1 餅圖

1）選中畫布中的餅圖組件，點選右側配置區「交互>交互事件>新增事件>滑鼠點選」。如下圖所示：

2）新增「組件聯動」執行動作，設定動作名稱、聯動範圍、聯動物件。

3）設定參數，參數名稱為area，參數類型為「當前組件欄位」，參數內容為「系列名」。即點選餅圖的系列，可將系列名作為參數area的值，傳遞給被選擇的聯動物件，進而實現聯動變化效果。如下圖所示：

2.5.2 表格1

1）選中畫布中的「表格1」，點選右側配置區「內容>編輯組件」，進入組件編輯介面。

2）選中 地區 欄位所在 A2 儲存格，點選右側「超級連結」，新增一個「當前頁面物件」連結。

3）在彈出的設定框中，選擇當前頁面物件為「柱形圖」，新增一個參數，設定參數名為area，參數值選擇公式，輸入 $$$ ，表示當前儲存格的值。設定完成後，點選設定框外的空白處即可關閉頁面。如下圖所示：

注：初次設定超連結時，儲存格字體顏色會改變，設定完成後請再次修改，二次修改超連結時不會再變化。

4）同理，再次為 A2 儲存格新增一個「當前頁面物件」的超級連結。

5）當前頁面物件設定為「表格2」，新增一個參數，設定參數名為area，參數值選擇公式，輸入 $$$ 。如下圖所示：

6）雙擊列表中的超連結名稱，分別重新命名為「聯動柱形圖」和「聯動表格2」。如下圖所示：

7）儲存格圖表的超連結設定，需選中圖表，在「儲存格元素>特效>交互屬性>新增連結」中設定，切忌不可在儲存格超連結處設定。

8）超連結設定內容同上，但是設定參數值時，需根據圖表實際情況選擇。本例餅圖點選的是系列，所以參數值需選擇「系列名」。如下圖所示：

4）設定完成後，點選範本左上方「傳回視覺化看板」即可傳回看板。

2.6 效果預覽

2.6.1 PC 端

儲存範本，預覽效果如 1.2 節所示。

2.6.2 行動端

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

點選下載範本：FVS組件聯動.fvs