圖表開啓自動數據點提示輪播接口

1.1 應用場景

圖表的數據點提示信息可以輪播展示，并且輪播的時候高亮顯示對應的數據點。

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

1.2 實現思路

使用之前先獲取需要操作的 圖表對象 ，然後調用改圖表對象的 openTooltip 方法即可開啓圖表數據點提示自動播放的功能。

chart.openAutoTooltip([delay, initPoints]);

在調用該方法後，會返回一個用於關閉自動輪播數據點提示的 controller，通過controller.stop()方法，即可停止當前的輪播數據點提示自動播放，如下表所示：

如果想要指定輪播間隔和需要顯示數據點提示的數據點集合，則可以追加可選參數，關於獲取指定數據點集合，可以參考 獲取圖表内特定的數據點對象 。

注：該方法不支持移動端。

2.1 數據準備

選擇文件>新建普通報表，添加數據集 ds1：SELECT * FROM 銷量 where 地區 ='華東'

2.2 圖表制作

 1）合并一片單元格，此處合并後的單元格爲 A3 。鼠标右鍵點擊 A3 單元格，選中單元格元素>插入圖表>折線圖，如下圖所示：

2）鼠标左鍵點擊插入的折線圖，在屬性面板右側選中「數據」，爲折線圖設置數據。如下圖所示：

根據實際需要可在屬性面板右側「樣式」中進一步設置圖表樣式，例如調整配色，坐标軸，字體大小顔色等，這裏不再詳細介紹。

2.3 開啓自動數據點提示輪播

2.3.1 輪播所有的數據點提示

在 A1 單元格裏新增文字「開啓數據點提示輪播」，選中 A1 單元格，在右側屬性面板中點擊 超級鏈接>添加鏈接，添加「JavaScript 腳本」超級鏈接，點擊超鏈後開始數據點提示輪播，如下圖：

JS 代碼如下所示：

//獲取圖表對象
var vanchart =FR.Chart.WebUtils.getChart("A3").getChartWithIndex(0);
// 開啓數據提示輪播, 并将輪播控制器綁定到圖表對象上
vanchart.controller = vanchart.openAutoTooltip();

注：獲取圖表塊對象 FR.Chart.WebUtils.getChart("chartID") 中的 chartID 爲當前圖表的單元格序号，如上“A3”。

由於模板中數據點提示自動切換采用的是默認時間間隔3S，所以在點擊圖表後需等待 3S 才會出現動畫效果，如果用戶想要更改時間間隔可修改 chart.openAutoTooltip([delay, initPoints]) 中的「delay」參數。

2.3.2 輪播指定的數據點提示（值大於 400）

用戶若想實現此效果，步驟與本文 4.3.1 章節相同。

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=1000//切換時間間隔爲1秒
vanchart.openAutoTooltip(delay,points);//開啓數據點提示輪播

2.4 停止自動數據點提示輪播

在 B1 單元格裏新增文字「停止數據點提示輪播」，選中 B1 單元格，在右側屬性面板中點擊 超級鏈接>添加鏈接，添加「JavaScript 腳本」超級鏈接，點擊超鏈後停止數據點提示輪播，如下圖所示：

JS 代碼如下所示：

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

2.5 繼續數據點提示輪播

在 C1 單元格裏新增文字「繼續數據點提示輪播」，選中 C1 單元格，在右側屬性面板中點擊 超級鏈接>添加鏈接，添加「JavaScript 腳本」超級鏈接，點擊超鏈後繼續數據點提示輪播，如下圖所示：

JS 代碼如下所示：

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

注：該方法不支持移動端。

2.6 效果預覽

保存模板，點擊分頁預覽，效果如下所示：

注：不支持移動端。

3.1 添加數據集

選擇文件>新建決策報表，添加數據集 ds1: SELECT * FROM 銷量 where 地區 ='華東'

3.2 模板設置

1）将「折線圖」圖表拖進新建的決策報表中，如下圖所示：

2）鼠标左鍵點擊報表設計主體中央的「編輯 」，在屬性面板右側選中「數據」， 爲折線圖設置數據。如下圖所示：

3.3 添加事件

在屬性面板右側，點擊控件設置>chart0>事件，添加「初始化後」事件，如下圖所示：

JS 代碼如下所示：

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

在決策報表中，還可以新增按鈕，給按鈕添加「點擊事件」，點擊後實現數據點提示自動輪播，JS 代碼如下所示：

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

注：由於決策報表裏沒有加載結束後事件，只有初始化後事件，但是我們需要在決策報表加載結束後再執行這段代碼，因此我們在代碼前面加上setTimeout()延時函數。

注：3000ms 代表的是事件加載結束後的時間，如果數據量龐大導緻報表生成過慢，測試一下加載報表所需時間，換算成毫秒後，将 3000 替換。例如：報表加載需要 15s，那麽當前代碼後面延遲的 3000 需要改成 15000 。

注：若爲決策報表的報表塊中的圖表，JavaScript 代碼如下：

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

3.5 效果預覽

保存模板，點擊PC端預覽，效果如應用場景中所示。

注1：不支持移動端。

注2：圖表全屏展示時不支持數據點提示輪播。

4.1 示例一：普通報表

已完成的模板，請參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\圖表數據點提示自動輪播-示例一.cpt

點擊下載模板：圖表數據點提示自動輪播-示例一.cpt

4.2 示例二：決策報表

已完成的模板，請參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\圖表數據點提示自動輪播-示例二.frm

點擊下載模板：圖表數據點提示自動輪播-示例二.frm