2016-10-11 80 views
0

我想使用Chart.js來創建一個實時圖表,但似乎有一個問題,它沒有從右到左的動畫。ChartJS實時動畫

,我從工作的例子是這樣的: http://plnkr.co/edit/KToiNLlBrQzBsO1cPDNU?p=preview 然而,這就是我得到: http://codepen.io/anon/pen/kkJJZE?editors=1010

我相信我正確地更新數據如下所示:

setInterval(function randomdata() { 
    cpuChart.data.datasets[0].data.shift(); 
    cpuChart.data.labels.shift(); 

    var ts = new Date().getTime(), 
     csecs = moment(ts).format('s'), 
     label = ''; 

    if (csecs % 15 === 0) { 
     label = csecs == '0' ? moment(ts).format('HH:mm') : moment(ts).format(':ss'); 
    } 

    cpuChart.data.datasets[0].data.push(Math.floor((Math.random() * 100) + 1)); 
    cpuChart.data.labels.push(label); 

    cpuChart.update(); 

}, 1000); 

我在這裏錯過了一些明顯的東西嗎?

回答

1

看來你的解決方案中提到的chart.js是不同的。

+0

有趣的是,你是對的 - 我看到兩個版本的Chart.JS在上面的註釋中都是'2.3.0',但它們並不相同。謝謝你指出,這解決了我面臨的頭痛。 – Justin