chart.js 2、右から左にアニメート（トップダウンではない）

Question

下のjsfiddleは問題を示しています。

最初のデータ挿入は問題ありませんが、データセットの長さを10に設定すると、データポイントが左に移動するのではなく上から下にアニメーション表示されるという望ましくない動作が発生します。それは非常に気を散らす。

http://jsfiddle.net/kLg5ntou/32/

setInterval(function() { 
data.labels.push(Math.floor(Date.now()/1000)); 
data.datasets[0].data.push(Math.floor(10 + Math.random() * 80)); 

// limit to 10 
data.labels = data.labels.splice(-10); 
data.datasets[0].data = data.datasets[0].data.splice(-10); 

chart.update(); // addData/removeData replaced with update in v2 
}, 1000); 

新たに挿入されたデータ点を有する左が右に表示される折れ線グラフの動きを持ってする方法はありますか？波打つ散漫アニメーションとは対照的に？

おかげ

Answer 1

あなたは2.5.0 chartsjs

を使用する必要があり、ここでそれは動作します：あなたはこれを解決するために http://jsfiddle.net/kLg5ntou/93

var data = { 
labels: ["0", "1", "2", "3", "4", "5", "6"], 
datasets: [ 
    { 
     label: "My First dataset", 
     fillColor: "rgba(95,186,88,0.7)", 
     strokeColor: "rgba(95,186,88,1)", 
     pointColor: "rgba(0,0,0,0)", 
     pointStrokeColor: "rgba(0,0,0,0)", 
     pointHighlightFill: "rgba(95,186,88,1)", 
     pointHighlightStroke: "rgba(95,186,88,1)", 
     data: [65, 59, 80, 81, 56, 55, 40] 
    } 
] 
}; 

var ctx = document.getElementById("chart").getContext("2d"); 
var chart = new Chart(ctx, {type: 'line', data: data}); 

setInterval(function() { 
chart.config.data.labels.push(Math.floor(Date.now()/1000)); 
chart.config.data.datasets[0].data.push(Math.floor(10 + Math.random() * 80)); 
// limit to 10 
chart.config.data.labels.shift(); 
chart.config.data.datasets[0].data.shift();