如何在 HighCharts 散点图中以动画方式将点从一个位置移动到另一个位置

Question

在 HighCharts 散点图中，我想使用平滑的动画将一个点从其位置移动到另一个位置。例如，在以下代码定义的散点图中（jfiddle链接）：

$(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});

将对象作为第三个参数与动画选项一起传递，您可以在参考部分看到这些选项。

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

参考：

• http://api.highcharts.com/highstock#Point.update()
• 动画类型

演示