2016-04-27 24 views
5

jsfiddle poniżej pokazuje problem.chart.js 2, animuj od prawej do lewej (nie odgórnie)

Pierwsze wstawienia danych są w porządku, ale gdy długość zestawu danych jest ograniczona do 10, widoczne jest niepożądane zachowanie, w którym punkty danych są animowane z góry na dół zamiast przesuwania w lewo. To bardzo rozprasza.

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

Czy istnieje sposób, aby ruch linia wykresu w lewo o nowo wstawiony punkt danych pojawi się na prawo? W przeciwieństwie do falującej, rozpraszającej animacji?

dzięki

+0

nie udało się rozwiązać ten problem? – giosh94mhz

+0

Ja tego nie zrobiłem - skończyło mi się błahostowanie własnymi wykresami w czasie rzeczywistym, w końcu faworyzowanie implementacji SVG - skończyło się na czymś bardzo bliskim (możesz to zrobić i zobaczyć index.html, żeby to zobaczyć w akcji): https://github.com/talmobi/realtimechart/blob/master/rtchart.js - Najprawdopodobniej wybrałbym d3js, gdybym był ponownie na tej samej pozycji. – talmobi

+0

Oto skrót do szybkiego podglądu: http://codepen.io/talmobi/pen/VjKVyQ – talmobi

Odpowiedz

0

należy użyć 2.5.0 chartsjs

tutaj to działa: 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();