Highcharts 高度图表：为系列更新动画提供与点更新动画相同的平滑度

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

最初我使用的是逐点更新，因为它有一个非常平滑的动画，你可以看到点在图表上滑动到新的坐标。然而，对于更大的数据集来说，这并不真正有效。例如，对于30个数据点，它可以正常工作，但是对于300个数据点，它必须循环通过序列中的每个点，这需要花费很长时间

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

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

有人对如何使系列更新动画与点更新动画一样平滑有任何想法吗？我包含了一个JFIDLE，它显示了两者之间的动画差异：

---

要在

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

---

现场演示：

---

API参考：

我在JSFIDLE中没有看到任何动画，只是一个跳跃。我想您在调用

setData（）

Hi@Trevor Gehman时忘了设置

redraw:true

，这个例子对我来说是正确的。默认情况下，

redraw

参数设置为

true

。没错，这不是

redraw

属性。但如果先单击“按点更新”，然后单击“重置”，然后单击“按系列更新”，则不再显示动画。这是因为原始数据数组中的数据不同。请检查此示例：

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