圖表切換API

1.1 問題描述

圖表往往是按照從左往右或從右往左的順序來切換。那麼如何實現點選圖表直接切換到其他不相鄰的圖表呢？效果如下圖所示：

1.2 實現思路

給圖表新增 JavaScript 類型的超級連結，呼叫圖表APIFR.Chart.WebUtils.getChart(chartId).showIndexChart(index);跳轉到指定圖表。

1.3 注意事項

該API不支援擴展圖表。

• index 表示第幾個圖表，例如 index=3，則跳轉到第 4 個圖表。

• 普通報表呼叫該API支援行動端，決策報表報表塊內圖表，僅支援行動端11.0.63及之後版本。

• 獲取圖表物件的方法參見文檔：圖表物件API

• FVS 視覺化看板中圖表組件不支援新增多個圖表，故不支援該API，類似效果可參考文檔 自訂按鈕切換Tab頁。

2.1 準備資料

建立普通報表，建立資料集 ds1，SQL 語句為：SELECT * FROM 銷量

2.2 插入圖表

1）合併一片儲存格區域，點選上方工具欄插入圖表按鈕，插入一個「雷達圖」。如下圖所示 :

2）點選「+」新增 2 個圖表：「圖表2」和「圖表3」，圖表2 類型選擇「條形圖」，圖表3 類型選擇「餅圖」。

2.3 綁定資料

1）雷達圖和條形圖綁定的資料是一致的，如下圖所示：

2）餅圖綁定資料如下圖所示：

2.4 新增超級連結

1）雷達圖屬性面板選擇「特效>交互屬性」，新增一個 JavaScript 類型的超級連結，JavaScript 程式碼如下：

FR.Chart.WebUtils.getChart("A1").showIndexChart(2);

如下圖所示：

2）餅圖屬性面板選擇「特效>交互屬性」，新增一個 JavaScript 類型的超級連結，JavaScript 程式碼如下：

FR.Chart.WebUtils.getChart("A1").showIndexChart(1);

如下圖所示：

2.5 設定切換屬性

圖表切換方式為「輪播」，「顯示」輪播箭頭，時間間隔設定為「5秒」，如下圖所示：

2.6 效果預覽

2.6.1 PC 端

儲存範本，點選「分頁預覽」，效果如 1.1 節所示。

2.6.2 行動端

App 端和 HTML5 端均支援，效果如下圖所示：

點選下載範本：圖表跳躍切換.cpt