Highchart:如果将数据点添加到条形图/柱形图,我如何设置动画持续时间?

时间:2016-08-08 13:53:39

标签: javascript jquery highcharts

以下是关注的代码: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: []
    }]
});
});

条形图根本没有动画效果。 (我会对颜色做点什么。) 我试过addSeries。但是,我只能在左边的图表中使用它,而右边的图表,只有最后绘制的条形图应该是新绘制/动画的。

0 个答案:

没有答案