圖表切換API

1.1 問題描述

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

.

1.2 實現思路

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

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

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

注3：該API支援行動端，但行動端決策報表的報表塊內圖表不支援呼叫該API。

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

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("chart2").showIndexChart(2);

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

JavaScript 程式碼如下：

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

2.5 設定切換屬性

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

2.6 效果預覽

2.6.1 PC 端

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

2.6.2 行動端

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