圖表切換API

1.1 問題描述

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

1.2 實現思路

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

注1：該API不支援擴展圖表。

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

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

注4：獲取圖表物件的方法參見文檔：如何獲取圖表物件

注5：該API不支援 FVS 視覺化看板。

2.1 準備資料

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

2.2 插入圖表

將雷達圖拖到決策報表中，點選，新增 2 個圖表：「圖表2」和「圖表3」，圖表2類型選擇「條形圖」，圖表3類型選擇「餅圖」。

2.3 綁定資料

3 個圖表綁定資料的方法是一致的，如下圖所示：

2.4 新增超級連結

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

JavaScript 程式碼如下：

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

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

JavaScript 程式碼如下：

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

2.5 設定切換屬性

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

2.6 效果預覽

2.6.1 PC端

儲存範本，點選「PC端預覽」，效果如「1.1問題描述」中所示：

2.6.2 行動端

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