FVS組件點擊聯動

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

注：不支援行動端。

1.1 版本

1.2 應用場景

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

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

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

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

效果如下圖所示：

1.3 功能簡介

1.3.1 組件聯動交互事件

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

使用標題組件、圖表組件聯動其他組件時，可使用「組件交互點選事件>組件聯動」。

選中組件，點選「交互>點選事件」，選擇「新增點選事件>組件聯動」，即可新增一個點選聯動組件事件。如下圖所示：

設定項具體說明如下表：

1.3.2 表格儲存格超級連結

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

注1：V1.7.1 版本之前的插件，只能透過 超級連結>動態參數 實現，參數聯動對整個範本有效，若範本包含多個分頁，會使範本傳回第一頁。

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

• 儲存格超級連結

• 儲存格圖表超級連結

2.1 準備範本

1）點選設計器菜單欄「檔案>建立大屏範本」，設定大屏範本名稱為「FVS組件聯動範例」，點選「確定」，如下圖所示：

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

ds1：SELECT * FROM 銷量

ds2：SELECT * FROM 銷量  ${if(len(area) == 0,"","where 地區 = '"   area   "'")}

ds1 表示獲取銷量表中所有資料，ds2 表示若地區參數 $area 為空，則獲取全部資料，否則按照 $area 獲取資料。

以 ds2 為例，步驟如下圖所示： 

2.2 新增組件

1）首先我們需要在「頁面1」中新增一個柱形圖、一個餅圖、兩個表格以及四個標題組件。

在組件列表欄找到對應組件，點選或拖拽新增到頁面中即可。

2）拖拽組件調整位置，四個標題組件內容分別為餅圖、柱形圖、表格1、表格2。

其中，「柱形圖」和「表格2」作為被聯動物件，「餅圖」和「表格1」作為設定超連結的物件。

最終佈局效果如下圖所示：

2.3 設定組件內容

選中畫布中的組件，在右側配置區設定組件「內容」。

2.3.1 設定餅圖和柱形圖內容

1）「餅圖」和「柱形圖」綁定資料如下圖所示：

餅圖：綁定沒有參數的 ds1 資料集，系列名為「地區」欄位，後續點選傳參則透過「系列名」進行傳遞。

柱形圖：綁定設定了參數 $area 的 ds2 資料集，分類名為「地區」欄位，則透過 $area 參數展示對應地區的資料。

2.3.2 設定表格1內容

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

將 ds1 資料集中的「地區、銷量」欄位拖入儲存格，銷量欄位的資料設定修改為「彙總>求和」。

表格字體樣式等自行設定，如下圖所示：

2）再合併一片儲存格，新增一個餅圖，綁定餅圖的資料為 ds1 資料集，系列名為「地區」欄位。如下圖所示：

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

設定完成後點選表格上方「傳回大屏編輯器」即可傳回到畫布。

2.3.3 設定表格2內容

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

將設定了參數 $area 的 ds2 資料集中的「地區、産品、銷量」欄位拖入儲存格，銷量欄位的資料設定修改為「彙總>求和」。

表格字體樣式等可自行設定，效果如下圖所示：

設定完成後點選表格上方「傳回企大屏編輯器」即可傳回到畫布。

2.4 設定組件名稱

設定組件名稱主要是為了便於區分和鎖定需要聯動的物件。

選中組件，在右側配置區點選「組件」，按照實際情況修改組件名稱即可。如下圖所示：

2.5 設定組件聯動

2.5.1 設定餅圖組件聯動事件

選中餅圖，點選右側配置區「交互>點選事件」，新增一個「組件聯動」事件，彈出組件聯動設定框。

• 事件名稱：隨意設定即可。

• 聯動範圍：選擇「指定物件」。若選擇「全局聯動」，則對整個範本所有分頁有效，不會出現聯動物件選擇框。

• 聯動物件：點選輸入框，在下拉列表中選擇我們要聯動的組件物件，本例中對應「柱形圖」組件以及「表格2」組件。

• 參數名輸入定義好的地區參數 area ，參數型別選擇「當前組件欄位」，參數內容選擇「系列名」。

即點選餅圖的系列，可將系列名作為 area 參數的值，傳遞給被選擇的聯動物件，進而實現聯動變化效果。

步驟如下圖所示：

2.5.2 設定表格1超連結當前頁面物件

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

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

在彈出的設定框中，選擇當前頁面物件為「柱形圖」，新增一個參數，設定參數名為 area ，參數值選擇公式，輸入 $$$ ，表示當前儲存格的值。

設定完成後，點選設定框外的空白處即可關閉頁面。

步驟如下圖所示：

3）點選超連結列表上方的複制按鈕  ，再複制一個超連結，將當前頁面物件修改為「表格2」。

再雙擊列表中的超連結名稱，分別重命名為「聯動柱形圖」和「聯動表格」。

步驟如下圖所示：

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

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

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

如下圖所示：

4）完成設定後，點選表格上方「傳回大屏編輯器」即可傳回畫布。

2.6 效果預覽

點選左上角「儲存」，再點選「預覽」，效果如 1.2 應用場景效果圖所示：

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