JS 圖表開啟自動資料點提示輪播--重複

1. 對圖表資料點輪播展示，並高亮顯示對應的資料點。

1

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

chart.openAutoTooltip([delay, initPoints]);

2

在呼叫該方法後，會返回一個用於關閉自動輪播資料點提示的 controller，透過controller.stop()方法，即可停止當前的輪播資料點提示自動播放，如下表所示。

1

開始資料點提示輪播。

1. 新增圖表後，對A1單元格新增超級連結→JavaScript，新增如下程式碼。

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

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

4. 如果想只對大於400的值進行輪播，參考程式碼如下。

5. 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

停止輪播。

1. 對文字新增js超級連結，填入程式碼。

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

3

繼續輪播。

1. 對文字新增js超級連結，填入程式碼。

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

1

對圖表新增初始化後事件。

2

js代码：

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

3

dashboard中還可以透過對按鈕新增點選後事件，實現相同的效果。

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

1

報表範本：

圖表資料點提示自動輪播-範例一.cpt

2

dashboard範本：

圖表資料點提示自動輪播-範例二.frm