ポイント追加時のハイチャート列アニメーション（series.addPoint（））

Question

新しいポイントを追加するときにハイチャートのアニメーションを変更/カスタマイズしたいと思います。ここで

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

hightchartsのデフォルトのアニメーションの例です：あなたは新しいバーは最後の後ろに表示されていることを見ることができます（次または前の）ボタンをクリックで http://jsfiddle.net/pe4csrr7/ 。

このデフォルトのアニメーションの代わりに、グラフの外側にあるバーが表示されます。ここに私が欲しいものの例があります：http://jsfiddle.net/smsducrg/（警告：この例のアニメーションは常に同じではありませんが、しばらくしてから、デフォルトのアニメーションが戻ってくる、私は理由はわかりません...）

ありがとう。

Answer 1

多分、chart.redraw（）の代わりにxAxis.setExtremes（）を使ってグラフを再描画することができます。 http://api.highcharts.com/highcharts/Axis.setExtremes

私は小さなトリックであなたが望むものを達成することができると思います。あなたは（あなたが50ポイントを追加しますときに、たとえば）多くのボタンをクリックした後も、このアニメーションを持つようにしたい場合は、デフォルトよりも大きなcropThresholdを追加する必要が

$(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); 
    }); 
}); 

。

ここでは、それが動作する方法の例を見ることができます：多分代わりchart.redrawを使用してのhttp://jsfiddle.net/pe4csrr7/5/