點擊存儲格切換Tab頁

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

1.1 版本

1.2 預期效果

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

因此，本文將介紹如何透過表格儲存格的擴展，透過點選儲存格切換 Tab 頁。效果如下圖所示：

1.3 實現思路

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

2.1 建立範本

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

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

2.2 設定 Tab 組件

1）點選範本左上角的「其他>Tab」，即可向畫布中新增一個 Tab 組件。如下圖所示：

2）點選 Tab 組件右上角的「+」按鈕重新整理增兩個標籤頁。如下圖所示：

3）向 3 個標籤頁中分別拖入圖表組件並調整組件位置和大小。以 標籤頁1 為例，如下圖所示：

4）選中右側 Tab 列表中的 Tab 組件，取消勾選「顯示切頁按鈕」。如下圖所示：

2.3 準備資料

1）建立 內建資料集 Embedded1 ，設計表的兩列分別為「標籤頁索引」和「Tab標籤頁」。

2）插入三行資料，標籤頁索引 從 0 開始，內容為「0、1、2」，Tab 標籤頁 的內容為「標籤頁1、標籤頁2、標籤頁3」。如下圖所示：

2.4 設定表格組件

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

2）A1、B1 儲存格輸入正文內容，A2、B2 儲存格拖入相應欄位。如下圖所示：

3）選中 B2 儲存格，點選右側「超級連結」，新增一個 JavaScript 腳本類型的超連結。

4）新增一個參數 a，參數值選擇公式，輸入 A2 ，再輸入 JavaScript 腳本。如下圖所示：

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

JavaScript 腳本如下所示：

var b=Number(a); // 將參數 a 轉化為數值類型，指派給 b
duchamp.getWidgetByName("Tab1_頁面1").showCardByIndex(b); //設定 Tab1_頁面1 展示第 b 個標籤頁

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

2.5 效果預覽

2.5.1 PC 端

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

2.5.2 行動端

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

點選下載範本：點選儲存格切換Tab標籤頁.fvs