Highcharts Spaltenanimation beim Hinzufügen von Punkt (series.addPoint())

Question

Ich möchte Highcharts Animation ändern/anpassen, wenn neue Punkt hinzufügen. Hier

series.addPoint([x, y], true, false); 

ist ein Beispiel für hightcharts' default Animation: http://jsfiddle.net/pe4csrr7/ Bei einem Klick auf eine Schaltfläche (neben oder zurück) können Sie sehen, dass die neuen Balken hinter dem letzten erscheint.

Anstelle dieser Standardanimation möchte ich die Balken außerhalb des Diagramms sehen. Hier ist ein Beispiel von dem, was ich will: http://jsfiddle.net/smsducrg/ (Warnung: die Animationen dieses Beispiels sind nicht immer gleich, nach einer Weile wird die Standardanimation zurückkommen, ich weiß nicht warum ...)

Danke.

Answer 1

Vielleicht anstelle von chart.redraw() können Sie xAxis.setExtremes() zum Neuzeichnen Ihres Diagramms verwenden. http://api.highcharts.com/highcharts/Axis.setExtremes

Ich denke, dass mit kleinen Trick Sie erreichen können, was Sie möchten.

$(function() { 
    var chart = $('#container').highcharts({ 
    chart: { 
     type: 'column' 
    }, 
    xAxis: { 
     categories: ['0', '1', '2', '3', '4', '5', '6'] 
    }, 
    series: [{ 
     data: [1, 1, 1, 1, 1, 1, 1], 
     cropThreshold:0 
    }] 
    }); 

    $('#prev').attr('start', 0); 
    $('#next').attr('end', 6); 

    $('#prev').off('click').on('click', function() { 
    var next = parseInt($('#next').attr('end'), 10) - 1; 
    var prev = parseInt($('#prev').attr('start'), 10) - 1; 

    var chart = $('#container').highcharts(); 
    chart.series[0].addPoint({ 
     x: prev, 
     y: 1 
    }, false, false); 
    chart.xAxis[0].setExtremes(prev + 1, next) 
    chart.xAxis[0].setExtremes(prev, next) 

    $('#next').attr('end', next); 
    $('#prev').attr('start', prev); 
    }); 


    $('#next').off('click').on('click', function() { 
    var next = parseInt($('#next').attr('end'), 10) + 1; 
    var prev = parseInt($('#prev').attr('start'), 10) + 1; 

    var chart = $('#container').highcharts(); 
    chart.series[0].addPoint({ 
     x: next, 
     y: 1 
    }, false, true); 
    chart.xAxis[0].setExtremes(prev, next - 1) 
    chart.xAxis[0].setExtremes(prev, next) 
    $('#next').attr('end', next); 
    $('#prev').attr('start', prev); 
    }); 
}); 

Sie benötigen größere cropThreshold als Standard hinzufügen, wenn Sie diese Animation haben wollen auch nach vielen Tastenklicks (so zum Beispiel, wenn Sie 50 Punkte hinzufügen werden).

Hier sehen Sie ein Beispiel sehen, wie es funktionieren kann: http://jsfiddle.net/pe4csrr7/5/