Highchart: How could I set animation duration in c

2019-09-09 06:15发布

问题:

Here is the code in concern: http://jsfiddle.net/e0qxfLtt/14/

$(function() {
var chartData = [50, 30, 4, 70, -10, -20, 20, 30];
var index = 1;
var chart1, chart2;
$('#b').click(function(){
    var buttonB =  document.getElementById('b');
    buttonB.disabled = true;
    if(index < chartData.length){
        chart1.series[0].remove();
        chart1.addSeries({data: [chartData[index - 1]]});
        setTimeout(function(){chart1.series[0].setData([]);}, 1000);
        setTimeout(function(){
            chart2.series[0].addPoint([index, chartData[index - 1]]);;
            index++;  
        }, 1000);
    }
    setTimeout(function(){buttonB.disabled = false;}, 3000);

})
chart1 = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'column'
    },
    title: {
        text: ''
    },
    xAxis: {
         title: {
            text: ''
        },
        gridLineWidth: 1,
        tickPixelInterval: 80,
        categories: [''],
        min:0,
        max:0
    },
    yAxis: {
        title: {
            text: ''
        },
        min:-100,
        max:100
    },
    plotOptions: {
        series: {
            animation: {
                duration: 1000
            }
        }
    },
    credits: {
        enabled: false
    },
    tooltip: {
        formatter: function () {
            return Highcharts.numberFormat(this.y, 2) + '%';
        }
    },
    legend: {
        enabled: false
    },
    exporting: {
        enabled: false
    },
    series: [{
        pointPlacement: 'on',
        data: [],
        pointWidth: 28
    }]
});
chart2 = new Highcharts.Chart({
    chart: {
        renderTo: 'container1',
        type: 'column'
    },
    title: {
        text: ''
    },
    xAxis: {
         title: {
            text: ''
        },
        gridLineWidth: 1,
        tickPixelInterval: 40,
        min:0,
        max:10
    },
    yAxis: {
        title: {
            text: ''
        },
        min:-100,
        max:100
    },
    plotOptions: {
        series: {
            animation: {
                duration: 1000
            }
        }
    },
    credits: {
        enabled: false
    },
    tooltip: {
        formatter: function () {
            return Highcharts.numberFormat(this.y, 2) + '%';
        }
    },
    legend: {
        enabled: false
    },
    exporting: {
        enabled: false
    },
    series: [{
        pointPlacement: 'on',
        data: []
    }]
});
});

The bar charts are not animating at all. (I will do something about the color.) I tried addSeries. However, I could only use it for the chart on the left, as for the chart on the right, only the last drawn bar should be newly drawn/animated.