FVS使用分頁製作幻燈片

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

1.1 版本

1.2 場景介紹

本文主要介紹的是利用 FVS 大屏編輯模式的多分頁設計，實現幻燈片示範效果。

1.3 實現思路

使用 FVS 製作示範彙報範本的思路如下：

1）梳理示範範本的故事脈絡，整理出範本的大體框架，再收集範本所需要的資料。

2）按照整理好的順序進行分頁設計，初步完成範本內容的製作。

3）進行視覺設計，優化範本視覺效果。

4）補充組件動畫，調整細節，實現最終效果。

本文主要講解範本 切換分頁、組件動畫、彈出框 等功能的實現，不詳細講解範本的製作思路。

2.1 切換分頁

1）FVS 範本包含多分頁時，可以設定預覽播放的方式，預設勾選「循環播放頁面」和「顯示切換按鈕」，但為了預覽介面更美觀，這裏我們取消「顯示切換按鈕」。如下圖所示：

2）取消切換按鈕後，可以透過電腦鍵盤的左右按鍵實現分頁切換，若還是希望在頁面上能透過滑鼠點選實現切換，那麼可以透過切換分頁API實現。

例如新增一個 圖片組件，自訂上傳一張合適的圖片。如下圖所示：

：

再給該圖片新增一個 JavaScript 點選事件，輸入 duchamp.nextStory();  即可實現點選跳轉下一頁。

2.2 組件3D旋轉

在範本中，可能會用到很多樣式相同但方向相反的圖片，這時我們可以透過組件屬性中的「3D旋轉」去實現方向的改變。

例如下圖中的兩組圖片：

z軸設定為 0° 和 180° 相當於垂直翻轉。如下圖所示：

y軸設定為 0° 和 180° 相當於水平翻轉。如下圖所示：

2.3 組件動畫

使用「組件動畫」可以使得範本示範時具有更豐富、美觀的效果。例如：

選中組件，點選「動畫>動效設定」，預設動效都是淡入淡出，根據希望的效果選擇對應的動效，以及動效時長、進入時機等即可。

在設定組件動畫時，可以將多個組件組合後再進行設定。如下圖所示：

2.4 點選跳出彈出框

在範例範本的「大事記」頁面上，設定了點選事件，點選不同事件可彈出不同的圖片。

2.4.1 製作顯示圖片的普通報表

注：普通報表中設定儲存格顯示圖片的詳細操作請參考文檔 儲存格用HTML顯示圖片 。

1）點選下載本文範例範本所使用的圖片：activity.zip ，將解壓後的 activity 資料夾放到 %FR_HOME%\webapps\webroot\help\picture 工程路徑下，如下圖所示：

2）在設計器中建立普通報表，建立內建資料集如下圖所示：

3）給範本新增一個「範本參數」，用於 FVS 範本實現點選傳參以顯示不同的圖片。如下圖所示：

4）將資料集中的「序號」、「圖片路徑」欄位分別拖入 A1、B1 儲存格。

雙擊序號所在的 A1 儲存格，設定過濾條件為「序號」等於參數 p 。如下圖所示：

5）C1 儲存格插入公式 "<img style='height:400px;width:600px' src='"   B1   "'/>" ，公式中定義圖片顯示的寬高為 600*400 。

再設定 C1 儲存格屬性>其他>顯示內容 為「用HTML顯示內容」。如下圖所示：

6）最後將 A、B 兩列隱藏，儲存報表。

2.4.2 在 FVS 範本中設定點選事件

注：FVS 設定點選跳出彈出框的詳細操作請參考文檔 FVS點選跳出彈出框 。

在本文範例範本的大事記分頁中，由於 富文字組件 不支援點選事件，所以我們將 圖片組件 置於富文字組件的上方，給圖片組件新增點選事件。 

彈出框內容連結使用相對路徑 /webroot/decision/view/report?viewlet=範例圖片.cpt ，根據事件設定參數 p 等於不同的「序號」。 

如下圖所示：

因為在普通報表中，C1 儲存格公式定義了圖片顯示的寬高為 600*400 px，所以彈出框的樣式設定需要根據圖片的尺寸進行適當的調整。

如下圖所示：

範本資源下載位址：圖書館年度匯報.zip