如何在HighCharts散點圖中將點從一個位置移動到另一個位置的動畫

Question

在HighCharts散點圖中，我想使用平滑動畫將點從其位置移動到另一個位置。 例如，在下面的代碼（jfiddle鏈路）中定義的scatteplot：

$(function() { 
    var chart; 
    $(document).ready(function() { 
     chart = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'container' 
      }, 
      xAxis: { 
       min: -0.5, 
       max: 5.5 
      }, 
      yAxis: { 
       min: 0 
      }, 
      title: { 
       text: 'Scatter plot with regression line' 
      }, 
      series: [{ 
       type: 'scatter', 
       name: 'Observations', 
       data: [[1, 1.5], [2.8, 3.5], [3.9, 4.2]], 
       marker: { 
        radius: 4 
       } 
      }] 
     }); 
    }); 

}); 

我想移動從（1,1.5）的第一個點（2,2）。可能嗎？

Answer 1

是的，請使用point.update。
這接受點選項作爲參數，所以你可以通過x和y值。

看看下面的代碼：

chart.series[0].points[0].update({x: 2, y: 2}); 

傳遞一個對象作爲第三個參數與動畫選項，你可以看到在REFFERENCE部分的選項。

chart.series[0].points[0].update({x: 2, y: 2}, true, {duration: 500, easing: 'linear'}); 

參考：

• http://api.highcharts.com/highstock#Point.update()
• animation types

Demo