Highchart：为什么我不能在这种情况下设置持续时间？

Question

相关代码在此处：http://jsfiddle.net/e0qxfLtt/5/

$(function drawCharts() {
var chartData = [100,120,120,140,110,110];
var index = 1;
$('#b').click(function(){
    var buttonB =  document.getElementById('b');
    buttonB.disabled = true;
    if(index < chartData.length){
        var x = index, // current time
        y = chartData[index];
        $('#container').highcharts().series[0].setData([chartData[index - 1], chartData[index]]);
        setTimeout(function(){$('#container').highcharts().series[0].setData([]);}, 1000);
        setTimeout(function(){
            if(index === 1){
                $('#container1').highcharts().series[0].addPoint([0,chartData[0]]);
            }
            $('#container1').highcharts().series[0].addPoint([x,y]);
                index++;  
            }, 1000);
    }
    setTimeout(function(){buttonB.disabled = false;}, 3000);

})
$(document).ready(function () {
    var chart1 = new Highcharts.Chart({
        chart: {
            renderTo: 'container1',
            type: 'line',
            animation: Highcharts.svg, // don't animate in old IE
            marginRight: 10,
            events: {
                load: function () {
                    series = this.series[0];
                },
            }
        },
        title: {
            text: '' 
        },
        xAxis: {
            title: {
                text: ''
            },
            gridLineWidth: 1,
            startOnTick: true,
            tickPixelInterval: 40,
            min:0,
            max:10
        },
        yAxis: {
            title: {
                text: ''
            },
            min:0,
            max:200
        },
        plotOptions: {
            line: {
                marker: {
                    enabled: false
                }
            },
            series: {
                animation: {
                    duration: 1000
                }
            }
        },
        tooltip: {
            formatter: function () {
                return Highcharts.numberFormat(this.y, 2);
            }
        },
        legend: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
        credits:{
            enabled:false
        },
        series: [{
            name: '',
            data: []
        }]
    });
    var chart2 = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'line',
            animation: Highcharts.svg, // don't animate in old IE
            marginRight: 10,
            events: {
                load: function () {
                    series = this.series[0];
                },
            }
        },
        title: {
            text: '' 
        },
        xAxis: {
            title: {
                text: ''
            },
            gridLineWidth: 1,
            startOnTick: true,
            tickPixelInterval: 80,
            categories: ['a', 'b'],
            min: 0,
            max: 1
        },
        yAxis: {
            title: {
                text: ''
            },
            min:0,
            max:200
        },
        plotOptions: {
            line: {
                marker: {
                    enabled: false
                }
            },
            series: {
                animation: {
                    duration: 2000
                }
            }
        },
        tooltip: {
            formatter: function () {
                return Highcharts.numberFormat(this.y, 2);
            }
        },
        legend: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
        credits:{
            enabled:false
        },
        series: [{
            name: '',
            data: []
        }]
    });
});

}）;

我希望左边的图表能够在2秒的时间内制作动画，并将此代码用于此目的：

plotOptions: {
        series: {
            animation: {
                duration: 2000
            }
        }
    }

然而，尽管有这样的设定，该图表似乎在瞬间生动。

可能是由于setTimeout函数吗？ 如果是这样，有什么方法吗？