Javascript 柱状图动画中的Highcharts问题

我正在使用Highcharts，希望在数据更改时制作具有良好动画效果的柱状图。动画必须使现有列更改其高度

我创建了一个fiddle（），其中方法3可以制作我想要的动画，但当有很多列时就不起作用（它们只是闪烁而不是动画）

方法1
方法2
方法3

_

$（函数（）{
var getRandomData=函数（大小、添加）{
如果（！加法）加法=5；
var数据=[]；
var len=Math.random（）*大小+加法；
var i；
对于（i=0；i数据长度）{
series.data[seriesLen-1]。删除（false）；
序列号--；
}
chart.redraw（）；
};
$（'#button3'）。单击（function（）{//可按我的需要工作
var chart=$（“#容器”）.highcharts（）；
方法3（图表100）；
chart.redraw（）；
});
$（'#按钮4'）。单击（函数（）{//对于大型图表失败
var chart=$（“#容器”）.highcharts（）；
方法3（图表100500）；
chart.redraw（）；
});
});

我如何使动画始终工作，即使是对于大量的列？ 我对折线图也有类似的问题：如果它们有超过200个点，我在多个系列上设置数据，然后重新绘制，它们有时只是闪烁而不是动画。我怎样才能解决这个问题

---

谢谢

不幸的是，setData没有此类动画，但您可以销毁该系列并添加新的

 $('#update').click(function () {

        chart.series[0].remove();
        chart.addSeries({
            data:  [5, 4, 2, 2, 14, 5, 3, 2, 1, 2]
        });
 });

请参阅simple exmaple：

---

没关系，但这不是我想要的动画类型。正如我在fiddle中所说，我想要的是“过渡”动画。但正如我所看到的，你有很多列都无法使用的地方，正如你所说的，所以我引入了一个工作循环，这似乎是可行的。你是否尝试过使用addPoint而不是setData（）？是的，请看看fiddle，这是方法3，不幸的是highcharts包含的所有内容。

$(function () {
    var getRandomData = function(size, addition) {
        if (!addition) addition = 5;
        var data = [];
        var len = Math.random() * size + addition;
        var i;
        for (i = 0; i < len; i++) {
            data.push(Math.random() * 50);
        }
        return data;
    };

    $('#container').highcharts({
        chart: {
                type: 'column',
            },
        series: [{
            data: getRandomData(100)
        }]
    });

    $('#button1').click(function() {
        var chart = $('#container').highcharts();

        chart.series[0].setData(getRandomData(100), false); // No animation happens

        chart.redraw();
    });

    $('#button2').click(function() {
        var chart = $('#container').highcharts();

        chart.series[0].remove();
        chart.addSeries({data: getRandomData(100)}); // Animation happens, but not the kind     I want

        chart.redraw();
    });

    var method3 = function(chart, size, addition) {
        var series = chart.series[0];
        var data = getRandomData(size, addition);
        var seriesLen = series.data.length;
        $.each(data, function(index, newPoint) {
            if (index < seriesLen) {
                series.data[index].update(newPoint, false);
            } else {
                series.addPoint([index, newPoint], false);
            }
        });
        while (seriesLen > data.length) {
            series.data[seriesLen-1].remove(false);
            seriesLen--;
        }

        chart.redraw();
    };

    $('#button3').click(function() { // Works as I want it
        var chart = $('#container').highcharts();
        method3(chart, 100);
        chart.redraw();
    });

    $('#button4').click(function() { // Fails for large chart
        var chart = $('#container').highcharts();
        method3(chart, 100, 500);
        chart.redraw();
    });
});

 $('#update').click(function () {

        chart.series[0].remove();
        chart.addSeries({
            data:  [5, 4, 2, 2, 14, 5, 3, 2, 1, 2]
        });
 });