chart.js 2, animiere von rechts nach links (nicht von oben nach unten)

Question

Das unten abgebildete JSFiddle zeigt das Problem.

Die ersten Dateneinfügungen sind in Ordnung, aber wenn die Länge des Datensatzes auf 10 begrenzt ist, sehen Sie das unerwünschte Verhalten, bei dem Datenpunkte von oben nach unten animiert werden, anstatt nach links zu gehen. Es ist extrem ablenkend.

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); 

Gibt es eine Möglichkeit, die Liniendiagramm nach links bewegen mit dem neu eingefügten Datenpunkt auf der rechten Seite erscheinen zu lassen? Im Gegensatz zu den wellenförmig ablenkenden Animationen?

dank

Answer 1

Sie 2.5.0 chartsjs

hier verwenden sollte es funktioniert: 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();