Highchart: How could I set animation duration in case of adding data points to bar/column chart?

隐身守侯 提交于 2019-12-12 02:25:10

问题


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.

来源:https://stackoverflow.com/questions/38831053/highchart-how-could-i-set-animation-duration-in-case-of-adding-data-points-to-b

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!