Question

我正在使用Highcharts，并希望在数据更改时制作具有漂亮动画的柱形图。动画必须使现有的列更改其高度。

我创建了一个小提琴（http://jsfiddle.net/Martinsos/Z2L6b/），其中方法3执行我想要的动画，但是当有很多列时它们不起作用（它们只是闪烁而不是动画）。

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>
<button id="button1">Method 1</button>
<button id="button2">Method 2</button>
<button id="button3">Method 3</button>

_

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

即使对于大量的列，如何使该动画始终有效？我也有线图的类似问题：如果他们有超过200个点，我在多个系列上设置setData然后重绘，他们有时只是闪烁而不是动画。我该如何解决？

谢谢

Answer 1

Unfortunaltey setData没有这种动画，但你可以销毁系列并添加新系列。

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

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

看简单的例子： http://jsfiddle.net/2CdVr/

柱形图动画的Highcharts问题

1 个答案: