2016-04-27 19 views
5

il jsfiddle di seguito mostra il problema.chart.js 2, animato da destra a sinistra (non dall'alto verso il basso)

I primi inserimenti di dati vanno bene, ma quando la lunghezza del set di dati è limitata a 10, si vede il comportamento indesiderato in cui i punti di dati sono animati dall'alto verso il basso anziché spostarsi verso sinistra. È estremamente dispersivo.

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

C'è un modo per avere il movimento grafico a linea di sinistra, il cui punto di dati appena inserito appaiono sulla destra? In contrasto con l'animazione di distrazione ondulata?

grazie

+0

ha fatto lei è riuscito a risolvere questo problema? – giosh94mhz

+0

Non l'ho fatto - ho finito per armeggiare con i miei grafici in tempo reale, alla fine favorendo un'implementazione SVG - ho finito con qualcosa di molto simile a questo (puoi clonare clone e visualizzare index.html per vederlo in azione): https://github.com/talmobi/realtimechart/blob/master/rtchart.js - Probabilmente sceglierei d3js se fossi di nuovo nella stessa posizione. – talmobi

+0

Ecco una codepen per un rapido sguardo: http://codepen.io/talmobi/pen/VjKVyQ – talmobi

risposta

0

si dovrebbe usare 2.5.0 chartsjs

qui funziona: 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(); 
Problemi correlati