點擊存儲格切換輪播器Tab頁

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

1.1 版本

1.2 預期效果

自訂按鈕切換輪播器Tab頁 文檔中，介紹瞭如何使用多個標題組件透過 JS 切換輪播器 Tab 頁，但當 Tab 頁較多時，該方案需要寫多個 JS 代碼，比較麻煩。

那麼本文將介紹的是，如何透過表格儲存格的擴展，透過點選儲存格切換輪播器 Tab 頁。預期效果如下圖所示：

1.3 實現思路

在 表格組件 中，列出「Tab 頁索引」及「對應 Tab 頁」的關係，給儲存格新增 JavaScript 型別的 超級連結，透過傳參給 showCardByIndex(index) API設定輪播器組件展示對應的 Tab 頁。

2.1 建立範本

點選設計器左上角「檔案>建立視覺化看板」，建立一張空白看板，可自訂名稱和尺寸。如下圖所示：

2.2 準備資料

點選左下方建立 內建資料集 ，建立一欄「序號」和「對應Tab頁」，序號從 0 開始，表示輪播器 Tab 頁的索引，Tab頁欄位可根據實際情況修改。如下圖所示：

2.3 設定輪播器組件

1）首先我們新增一個輪播器組件到畫布中，再隨意新增一些圖表組件，可以將圖表組件進行組合。如下圖所示：

注：同時選中多個組件，按滑鼠右鍵，點選「組合」即可將組件組合在一起。

2）再依次選中組件或組合，將其拖入輪播器中，組件在輪播列表中的順序與左側組件圖層的順序保持一致。如下圖所示：

注：V1.10.1 及之後版本的插件才支援將「不包含輪播器組件的組合」拖入輪播器組件。

3）輪播器組件預設開啓自動輪播，本例為了示範需要，需取消勾選「開啓自動輪播」。如下圖所示：

2.4 設定表格組件

1）新增一個表格組件到畫布中，點選「編輯組件」進入表格編輯介面。如下圖所示：

2）將「序號」欄位拖入 A2 儲存格，「對應Tab頁」欄位拖入 B2 儲存格，第一行寫上對應標題。

3）選中 B2 儲存格，點選右側「超級連結」，新增一個 JavaScript 腳本型別的超連結。首先新增一個參數 a，參數值選擇公式，輸入 A2 ，再輸入 JavaScript 腳本：

var b=Number(a); // 將參數 a 轉化為數值型別，指派給 b
duchamp.getWidgetByName("輪播器1_頁面1").showCardByIndex(b); //設定 輪播器1_頁面1 展示第 b 個 Tab 頁

步驟如下圖所示：

注：首次設定超連結後儲存格樣式改變，可自行修改。

4）可根據實際情況設定儲存格邊框、字體等樣式，設定完成後，點選表格編輯介面左上方「傳回視覺化看板」傳回畫布。

2.5 效果預覽

2.5.1 PC 端

點選右上角「預覽」。預覽效果如 1.2 節預期效果所示。

2.5.2 行動端

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

點選下載範本：點選儲存格切換輪播器Tab頁.fvs