2016-04-27 44 views
5

aşağıdaki jsfiddle sorunu gösterir.chart.js 2, sağdan sola (yukarıdan aşağıya değil)

İlk veri ekleri gayet iyidir, ancak veri kümesinin uzunluğu 10'da sınırlandığında, veri noktalarının hareket ettirmek yerine sol hareket etmek yerine yukarıdan aşağıya doğru hareket ettiği istenmeyen davranışları görürsünüz. Bu son derece rahatsız edici.

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

, yeni eklenen veri noktasına sahip soldan sağa görünen çizgi grafiği içeri girecek bir yolu var mı? Dalgalı dikkat dağıtıcı animasyonun aksine?

sayesinde

+0

Bunu çözmek için yönetilen mi? – giosh94mhz

+0

Ben yapmadım - kendi gerçek zamanlı grafikleri ile, sonunda bir SVG uygulama lehine bilerek sona erdi - Ben bu oldukça yakın bir şey ile sona erdi (sen gidip görmek için index.html görüntülemek clone olabilir eylemde): https://github.com/talmobi/realtimechart/blob/master/rtchart.js - Yine aynı pozisyondaysam muhtemelen d3js'yi tercih ederim. – talmobi

+0

Hızlı bir görünüm için bir kod sayfası: http://codepen.io/talmobi/pen/VjKVyQ – talmobi

cevap

0

Sen 2.5.0 chartsjs burada

çalıştığını

kullanmalıdır: 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();