К сожалению, график рисует вещи только в пошаговых скачках, когда добавляются новые данные и область графика заполняется. Я бы хотел, чтобы он просто непрерывно прокручивал и почти поочередно добавлял новые данные и прокручивал график влево, а не перескакивал.
Я могу заставить код двигаться более плавно, поместив анимацию в 1000 мс, но тогда рисунок будет испорчен. Попробуйте пример ниже.
myChart = new Chart(ctx, {
type: 'scatter',
data: {
labels: [],
datasets: []
},
options: {
// animation:false,
animation:{
duration: 200,
easing: 'linear'
},
maintainAspectRatio: false,
scales: {
xAxes: [{
ticks: {
callback: function(value) {
//"HH:mm:ss"
return moment(value).format("mm:ss");
}
},
}],
yAxes: [{
ticks: {
beginAtZero:true,
max: 100,
min: 0
}
}]
}
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Chart.js demo</title>
<!-- import plugin script -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js'></script>
</head>
<body>
<!-- line chart canvas element -->
<canvas id="buyers" width="300" height="200"></canvas>
<script>
// line chart data
var buyerData = {
type:"scatter",
data: {
labels: [],
datasets: [{label:"Trainer",data:[
{x:Date.now()-100,y:5},{x:Date.now(),y:5},{x:Date.now()+1000,y:15}],borderColor:"rgb(0,0,255)",showLine:true,fill:false}]
},
options: {
// animation:false, MUCH more jumpy
animation:{
duration: 200,
easing: 'linear'
},
maintainAspectRatio: false,
scales: {
xAxes: [{
ticks: {
callback: function(value) {
//"HH:mm:ss"
return moment(value).format("mm:ss");
}
},
}],
yAxes: [{
ticks: {
beginAtZero:true,
max: 100,
min: 0
}
}]
}
}
};
// get line chart canvas
var buyers = document.getElementById('buyers').getContext('2d');
// draw line chart
let chart = new Chart(buyers,buyerData);
function update(){
buyerData.data.datasets[0].data.push({x:Date.now(),y:Math.random()*100})
chart.update();
setTimeout(update,100);
}
update();
</script>
</body>
</html>
Codepen