1. 概述
適用場景：安裝了「FineVis資料視覺化」插件的使用者，可參考本文了解 FineVis 的相關功能。
1.1 版本
| 報表伺服器版本 | 插件版本 | 功能變更 |
|---|---|---|
| 11.0.22 | V2.7.1 | - |
| 11.0.22 | V3.2.0 | 擴展組件內使用的圖片組件、網頁連結/彈出框支援根據動態值-資料集欄位進行擴展 |
1.2 應用場景
「擴展組件」結合標題組件或富正文組件的 動態值 功能，可根據資料集欄位動態生成一系列指標卡，每個指標卡展示不同的資料。
1.3 功能簡介
「擴展組件」是一種容器，當前僅支援拖入「標題、富正文和圖片」三種組件以及由這三種組件組成的組合。
拖入組件後，根據「擴展依據」進行擴展（擴展依據必須是動態值中的欄位來源），實現快速生成多個組件。
注：本文僅為大家介紹「擴展組件」特有功能，其他屬性不贅述。
擴展組件不支援組件交互事件。
組件動畫請參見：FVS組件動畫 。
組件屬性請參見：FVS組件樣式屬性 。
2. 功能介紹
2.1 新增擴展組件
點選或拖曳組件區「容器>擴展組件」，即可將擴展組件新增到畫布中。
2.2 擴展範本
擴展組件中存在一個預設的「擴展範本」，用於承載組件/組合。
一個擴展組件僅有一個「擴展範本」，不支援增加，刪除即連同擴展組件一起刪除。
1）拖入組件/組合規則如下：
僅支援拖入標題、富正文、圖片組件，以及這三種組件組成的組合。
直接拖曳組件區或頁面中組件/組合到「擴展範本」上方，出現提示「釋放進入擴展範本」時鬆開滑鼠即可。
拖入組件/組合時，組件/組合大小不變。
釋放時，組件位置若超出擴展範本左/上邊框，則組件拖入後自動對齊左/上邊框；其餘位置則以組件釋放位置為準。
若組件超出擴展範本右/下邊框，則截斷顯示。
如下圖所示：
也支援在組件圖層列表中，拖曳組件圖層順序移入擴展範本，組件位置預設在擴展範本中心位置。如下圖所示：
2）移出組件/組合方式如下：
直接拖曳組件到擴展組件外，出現提示「釋放移出擴展範本」時鬆開滑鼠即可。此時移出的組件位置以釋放位置為準。
在組件圖層列表或擴展組件列表中，直接拖曳組件圖層順序移出擴展組件層級即可。此時移出的組件位置保持不變。
在擴展組件列表中，懸浮組件，點選「更多>移出」即可 。此時移出的組件預設顯示在擴展組件右側。
如下圖所示：
3）「擴展範本」支援設定名稱、大小。啟動調整鎖定時，調整擴展範本大小，內部組件大小也會等比例變化。
注：擴展範本拖曳大小僅支援從右/下方拖曳。
2.3 擴展組件內容設定
擴展組件支援設定佈局方式、組件間距和擴展依據。
1）佈局方式：支援選擇「固定列數」或「固定行數」，根據「擴展範本」大小顯示，超出擴展組件大小時，可捲動查看。
2）組件間距：支援分別設定「列距」和「欄距」。
3）擴展依據：
提供基於當前擴展組件內「動態值」來源表作為選擇；若當前擴展組件沒有可用的資料集，提示暫無資料。
設定擴展依據後，根據資料集的資料條數定義擴展的組件數量，含有該資料集的動態值，根據擴展順序依次按行取值。
無動態值或動態值為公式的組件，擴展時內容不變；動態值為資料集欄位，但不符合擴展依據的組件，按照擴展的組件數量依次取值。
設定過擴展依據，即使後續擴展組件內不再包含該依據，之前設定的擴展也不受影響，直到重新選擇擴展依據。
注：擴展出的組件沒有實體，但仍然繼承擴展範本內組件的所有交互能力。
3. 範例
3.1 建立範本
1）在 FineReport 設計器左上角點選「檔案>建立視覺化看板」。
2）在「建立空白看板」Tab 中，可自訂範本名稱、畫布大小，以及選擇範本樣式。
3）點選「建立看板」。
3.2 準備資料
新增資料庫查詢 ds1，輸入 SQL 查詢語句：SELECT 產品,sum(銷量) as 銷量 FROM 銷量 group by 產品 。
SQL 的意思為：按照產品分組，求出每個產品的銷量總和，然後傳回每個產品的名稱以及該產品的銷量總和。
2）建立內建資料集 Embedded1，如下圖所示：
3.3 設計指標卡
3.3.1 製作指標卡背景
1）點選組件區「媒體>圖片」，將圖片組件新增到畫布中。
2）將下面這張圖片另存到本地。
3）選中圖片組件，圖片類型選擇「自訂上傳」，上傳儲存的圖片，選擇該圖片作為指標卡背景。
3.3.2 設定產品名稱動態值
1）點選組件區「文字>標題」，將標題組件新增到畫布中，根據指標卡背景設定合適的位置和大小。
2）標題內容選擇「動態值」，點選「編輯動態值」按鈕，彈出「編輯動態值」介面。
3）動態值來源為「資料集」，選擇 ds1 資料集，產品欄位。
4）點選「確定」完成編輯。根據實際情況自行設定內容樣式，例如字體、顏色等等。
3.3.3 設定產品銷量動態值
1）複製貼上 3.3.2 節設定好的標題組件，點選「編輯動態值」，彈出「編輯動態值」介面。
2）將欄位修改為「銷量」。
3）新增「條件樣式」，點選「條件設定」，設定條件為「值小於字串 2000」，點選「確定」。
4）條件樣式修改顏色為紅色。最後點選「確定」。
.3.4 添加图片组件
1）点击组件区「其他>图片」，将图片组件添加到画布中，设置合适的位置和大小。
2）图片类型选择「在线图片」，输入：http://localhost:8075/webroot/help/picture/.png
3）将鼠标光标放置于链接中 .png 前，点击「插入动态值」按钮，弹出「编辑动态值」界面。
4）动态值来源为「字段」，选择 Embaddad1 数据集，id 字段。
5）点击「确定」完成编辑。
3.3.5 组合组件
在画布中框选制作好的组件，点击画布右侧配置栏的「组合」按钮，将其组合为一个分组。
3.4 設定指標卡擴展
1）點選組件區「容器>擴展組件」，將擴展組件新增到畫布中。
2）選中組合，拖入擴展組件的「擴展範本」中。
3）選中「擴展範本」，根據內容調節範本大小。
4）選中「擴展組件」，佈局方式為固定列數 2 列，擴展依據選擇資料集 ds1 。
此時可以看到擴展出了 5 個不同內容的指標卡，且產品銷量小於 2000 時，值顯示為紅色。
3.5 效果預覽
3.5.1 PC 端
儲存範本，點選「預覽」。效果如下圖所示：
3.5.2 行動端
預覽方式請參考 FVS行動端預覽 ，效果如下圖所示：
4. 範本下載
點選下載範本：FVS實現擴展指標卡.fvs
