Highcharts：赋予系列更新动画与点更新动画相同的平滑度

Question

我有一个 highcharts 散点图，需要通过单击按钮来更新数据。

最初我使用的是逐点更新，因为它有一个非常流畅的动画，您可以看到点在图表上滑行到新坐标。但是，这实际上不适用于更大的数据集。例如，对于 30 个数据点，它可以正常工作，但对于 300 个数据点，它必须循​​环遍历系列中的每个点，这需要很长时间。

按系列操作效果很好，但在更新时，新系列刚刚出现，使更新看起来非常笨拙。

我尝试在逐点更新时将redraw设置为false，并在所有点都更新后重绘图形，但是对于较大的数据集仍然存在巨大的滞后。

有人对如何使系列更新动画像点更新动画一样流畅有任何想法吗？我已经包含了一个 jfiddle，它显示了两者之间的动画差异：

http://jsfiddle.net/3bt78p1k/1/

$(function () {
    $('#container').highcharts({

        chart: {
            type: 'scatter',
          zoomType: 'xy',
            animation: {
                duration: 1000
            }
        },

        xAxis: {
            categories: [2012, 2013, 2014, 2015, 2016, 2017, 2018],
            min: 2012,
            max: 2018
        },
      yAxis: {
        title: {
          text: 'Units Attempted'
        },
        min: 50,
        max:  100,
      },
        series: [{
            data: [[2012, 60], [2012, 62], [2012, 54], [2012, 70], [2012, 68]],
            name: 'Update by Series'
        }]

    });


    $('#update_series').click(function () {
        var chart = $('#container').highcharts();
        var newData = [[2013, 72], [2013, 77], [2013, 64], [2013, 72], [2013, 77]];
        chart.series[0].setData(newData);
    });

    var pointsArr = [72, 77, 64, 72, 77];
    $('#update_point').click(function () {
        var chart = $('#container').highcharts();
        $.each(chart.series[0].points, function(index, val) {
                this.update({x:2013, y:pointsArr[index]});
        })
    });

     $('#reset').click(function () {
        var chart = $('#container').highcharts();
                var originalData = [[2012, 60], [2012, 62], [2012, 54], [2012, 70], [2012, 68]];
        chart.series[0].setData(originalData);
    });
});

Answer 1

要在setData 方法中应用动画，点需要通过x 位置或id 属性匹配。例如：

$('#container').highcharts({
    ...,
    series: [{
        data: [
            {x: 2012, y: 60, id: 'one'},
            {x: 2012, y: 62, id: 'two'},
            {x: 2012, y: 54, id: 'three'},
            {x: 2012, y: 70, id: 'four'},
            {x: 2012, y: 68, id: 'five'}
        ],
        ...
    }]

});


$('#update_series').click(function() {
    var chart = $('#container').highcharts();
    var newData = [
        {x: 2013, y: 72, id: 'one'},
        {x: 2013, y: 77, id: 'two'},
        {x: 2013, y: 64, id: 'three'},
        {x: 2013, y: 72, id: 'four'},
        {x: 2013, y: 77, id: 'five'}
    ];
    chart.series[0].setData(newData);
});

---

现场演示： http://jsfiddle.net/BlackLabel/0k1rqpa5/

API 参考： https://api.highcharts.com/class-reference/Highcharts.Series#setData