圖表開啟自動資料點提示輪播API

1.1 預期效果

一般情況下，圖表的「資料點提示」資訊需要將滑鼠行動到圖形上才會顯示出來。那麼如何讓圖表的資料點提示資訊自動輪播展示呢？預期效果如下圖所示：

注：地圖開啟資料點提示自動輪播的方法有所不同，詳細介紹參見文檔：地圖開啟資料點提示輪播 。

1.2 實現思路

使用之前先獲取需要操作的 圖表物件 ，然後呼叫該圖表物件的 openAutoTooltip 方法即可開啟圖表資料點提示自動輪播的功能。

chart.openAutoTooltip(delay, initPoints]);

在呼叫該方法時，可綁定一個用於關閉自動輪播資料點提示的控制器 controller，透過controller.stop()方法，即可停止當前的輪播資料點提示自動播放，如下表所示：

注1：如果想要指定輪播間隔和需要顯示資料點提示的資料點集合，則可以追加可選參數，關於獲取指定資料點集合，可以參考 獲取圖表內特定的資料點物件 。 

注2：圖表輪播只能按照系列順序輪播，不支援按照分類順序輪播 。

注3：該API不支援擴展圖表，不支援行動端 。

注4：FVS 視覺化看板詳情可見 FVS基礎圖表實現數據點提示輪播 ，但 FVS 中暫未適配暫停/繼續/停止輪播API，可透過滑鼠移入移出暫停繼續 。

2.1 資料準備

建立普通報表，建立資料庫查詢 ds1，SQL 語句為：SELECT * FROM 銷量 where 地區 ='華東'

2.2 設計報表

2.2.1 插入圖表

首先預留兩行儲存格後面新增超連結使用，從 A3 儲存格開始合併一片儲存格區域，合併後選中 A3 儲存格，點選工具欄的「插入圖表」按鈕，插入「折線圖」。如下圖所示：

2.2.2 綁定圖表資料

選中圖表所在儲存格，在屬性面板右側選中「儲存格元素>資料」，綁定圖表資料如下圖所示：

2.2.3 取消標題可見

選擇「樣式>標題」，取消勾選「標題可見」。如下圖所示：

根據實際需要可進一步設定其他 圖表樣式，例如調整配色，坐標軸，字體大小顏色等，這裏直接使用預設設定。

2.3 設定超連結控制提示輪播

2.3.1 開啟資料點提示輪播

在 A1 儲存格中輸入正文「開啟資料點提示輪播」，選中 A1 儲存格，在右側屬性面板中點選 「超級連結>新增連結」，新增「JavaScript 腳本」超級連結，輸入 JavaScript 程式碼如下：

//獲取圖表物件
var vanchart =FR.Chart.WebUtils.getChart("A3").getChartWithIndex(0);
// 開啟資料提示輪播, 並將輪播控制器綁定到圖表物件上
vanchart.controller = vanchart.openAutoTooltip();

注1：獲取圖表塊物件 FR.Chart.WebUtils.getChart("chartID") 中的 chartID 為當前圖表的儲存格序號，如上“A3”。

注2：若想修改輪播間隔時間，可修改 chart.openAutoTooltip(delay, initPoints) 中的 delay 參數。如上若為 vanchart.openAutoTooltip(5000)，即輪播間隔時間為 5000 ms 即 5 s 。

步驟如下圖所示：

擴展：僅指定的資料點提示輪播。例如：希望實現只有「值大於 400」的資料點提示可自動輪播，那麼可使用如下所示 JavaScript 程式碼：

var vanchart =FR.Chart.WebUtils.getChart("A3").getChartWithIndex(0);//獲取圖表物件
var points = []; vanchart.series.forEach(function (ser){
//獲取所有的資料提示點    
points = points.concat(ser.points);}) 
points = points.filter(function (p){
//篩選大於 400 的資料提示點   
return p.value > 400;})
var delay=2000; //切換時間間隔為2秒
vanchart.controller = vanchart.openAutoTooltip(delay,points);//開啟資料點提示輪播, 並將輪播控制器綁定到圖表物件上

2.3.2 停止資料點提示輪播

在 B1 儲存格中輸入正文「停止資料點提示輪播」，選中 B1 儲存格，在右側屬性面板中點選 「超級連結>新增連結」，新增「JavaScript 腳本」超級連結，輸入 JavaScript 程式碼如下：

//獲取圖表物件
var vanchart =FR.Chart.WebUtils.getChart("A3").getChartWithIndex(0);
// 停止自動輪循播放資料點提示
vanchart.controller.stop(); 

2.3.3 繼續資料點提示輪播

在 C1 儲存格中輸入正文「繼續資料點提示輪播」，選中 C1 儲存格，在右側屬性面板中點選 「超級連結>新增連結」，新增「JavaScript 腳本」超級連結，輸入 JavaScript 程式碼如下：

//獲取圖表物件
var vanchart =FR.Chart.WebUtils.getChart("A3").getChartWithIndex(0);
//繼續從停止位置播放資料點提示輪播
vanchart.controller.moveOn(); 

2.4 效果預覽

儲存範本，點選「分頁預覽」，效果如下所示：

注：不支援行動端。

2.5 設定載入結束後事件開啟提示輪播

上述範例是透過點選超連結控制圖表資料點提示輪播的開啟、停止與繼續，那麼若希望預覽範本時直接開啟圖表資料點提示輪播，不需要點選控制，可以給範本新增一個「載入結束」事件。

點選菜單欄「範本>範本 Web 屬性>分頁預覽設定」，選擇「為該範本單獨設定」，在最下方新增「載入結束」事件，輸入 JavaScript 程式碼如下：

注1：與儲存格超連結中的程式碼相比，這裏需要新增一個 setTimeout() 延時函式，3000 表示 3000 ms 即 3 s。

注2：這裏直接開啟資料點提示輪播，無須綁定輪播控制器。

setTimeout(function(){
//獲取圖表物件
var vanchart =FR.Chart.WebUtils.getChart("A3").getChartWithIndex(0);
// 開啟資料提示輪播
vanchart.openAutoTooltip();
},3000)

步驟如下圖所示：

3.1 準備資料

建立決策報表，與普通報表範例一樣，建立資料庫查詢 ds1，SQL 語句為: SELECT * FROM 銷量 where 地區 ='華東' 。

3.2 設計報表

3.2.1 插入圖表

1）先將 body 的佈局方式改為「絕對佈局」。

2）將折線圖拖入 body 中，並適當拉大圖表。

3.2.2 綁定圖表資料

雙擊圖表，在右側屬性面板點選「資料」，綁定圖表資料如下圖所示：

3.3 設定按鈕元件點選事件

3.3.1 新增按鈕元件

向 body 中拖入三個按鈕元件，選中按鈕，可在屬性中修改「按鈕名稱」。如下圖所示：

3.3.2 新增點選事件

選中按鈕元件，點選屬性面板「事件」，分別給三個按鈕新增點選事件。如下圖所示：

注：在決策報表中 JavaScript 程式碼的寫法與普通報表不同。

開啟提示點輪播：

var vanchart =FR.Chart.WebUtils.getChart("chart0").getChartWithIndex(0);
vanchart.controller = vanchart.openAutoTooltip();

停止提示點輪播：

var vanchart =FR.Chart.WebUtils.getChart("chart0").vanCharts.charts[0] ;
vanchart.controller && vanchart.controller.stop();

繼續提示點輪播：

var vanchart =FR.Chart.WebUtils.getChart("chart0").vanCharts.charts[0] ;
vanchart.controller && vanchart.controller.moveOn();

3.4 效果預覽

儲存範本，點選「PC 端預覽」，效果如下圖所示。

注1：不支援行動端。

注2：圖表全螢幕展示時不支援資料點提示輪播。

3.5 設定初始化後事件

與 2.5 節類似，若希望預覽範本時直接開啟圖表資料點提示輪播，不需要點選按鈕控制，可以給圖表新增一個「初始化後」事件。JavaScript 程式碼如下：

setTimeout(function(){
//獲取圖表物件
var vanchart =FR.Chart.WebUtils.getChart("chart0").getChartWithIndex(0);
// 開啟資料提示輪播
vanchart.openAutoTooltip();
},3000)

注：若為決策報表的報表塊中的圖表，JavaScript 程式碼如下：

setTimeout(function(){
var vanchart=FR.Chart.WebUtils.getChart("A1","report0").getChartWithIndex(0);
vanchart.openAutoTooltip();
},3000)

點選下載範本：

控制圖表資料點提示輪播.cpt

圖表資料點提示自動輪播.cpt

點選下載範本：

控制圖表資料點提示輪播.frm

圖表資料點提示自動輪播.frm