如何清除高级图表中系列的开始渲染动画？

Question

首先澄清一些。 高图表中有多种动画。我只对开始动画感兴趣，当添加系列时，它会绘制折线图。< / p>

话虽如此，看来如果一个系列处于其开始动画的中间并被删除，动画将完成绘制并永久保留在图表上。添加的新系列不会重绘。

有没有办法删除该特定系列＆＃39;开始动画，还是重绘图表以刷新它？我假设重新创建整个图表可以实现这一点，但它不能满足我的目的。我需要第一个系列保持绘制而不触发第一个系列的开始动画，但第二个系列必须有一个开始动画，以便它可以在第一个系列的顶部动画。

以下是复制问题的一个例子

＆＃13;

＆＃13;

$(function () {
	var data1 = [null, null, null, null, null, 6, 11, 32, 110, 235, 369, 640,
                1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
                27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,
                26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
                24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,
                22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
                10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104];

	//var animatedData = { color: '#FF00FF', data: data1 };
	var animatedData = { data: data1 };
	var data = [{name: "USA", data: data1}, animatedData];
	
	function reanimateChart() {
		var chart = $('#container').highcharts();
		chart.series[1].remove();
		chart.addSeries(animatedData);
		chart.redraw();
	}
	
	$('#btn1').click(function () {
		reanimateChart();
    });
	
	$('#btn2').click(function () {
		reanimateChart();
		setTimeout(reanimateChart, 100);
	});
    
    $('#container').highcharts({
        chart: {
            type: 'area'
        },
        title: {
            text: 'US and USSR nuclear stockpiles'
        },
        subtitle: {
            text: 'Source: <a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">' +
                'thebulletin.metapress.com</a>'
        },
        xAxis: {
            allowDecimals: false,
            labels: {
                formatter: function () {
                    return this.value; // clean, unformatted number for year
                }
            }
        },
        yAxis: {
            title: {
                text: 'Nuclear weapon states'
            },
            labels: {
                formatter: function () {
                    return this.value / 1000 + 'k';
                }
            }
        },
        tooltip: {
            pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
        },
        plotOptions: {
            area: {
                pointStart: 1940,
                marker: {
                    enabled: false,
                    symbol: 'circle',
                    radius: 2,
                    states: {
                        hover: {
                            enabled: true
                        }
                    }
                }
            }
        },
        series: data
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div>
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
    <div><button id="btn1">reanimate</button></div>
    <div><button id="btn2">break animation</button></div>
</div>

＆＃13;

＆＃13;

＆＃13;