有没有办法进行自动滚动？

Question

Kian在这里，

我正在尝试将数据放入chartJS，并使其在到达末尾时自动滚动

就像到达这里一样

它将继续添加数据而无需用户滚动，如果没有底部的滚动条，有什么方法可以做到这一点？

Answer 1

没有可见滚动条的自动滚动将意味着用户永远不会再看到滚动到可见区域之外的数据。如果这是您想要的，则只要达到特定限制，就可以简单地删除过时的labels和dataset值。可以使用Array.shift()完成，这会从Array.shift()中删除第一个元素。

array

请查看下面的可运行代码段，该代码段最多可包含10个标签和值。一旦达到此限制，将删除过时的标签和值。

chart.data.labels.push(<new label>);
chart.data.datasets[0].data.push(<new value>);
if (chart.data.labels.length > maxValues) {
  chart.data.labels.shift();
  chart.data.datasets[0].data.shift();
}
chart.update();

var chart = new Chart('canvas', {
  type: "line",
  responsive: true,
  maintainAspectRatio: false,
  data: {
    labels: [],
    datasets: [{
      label: "Data",
      data: [],
      fill: true,
      backgroundColor: "lightblue",
      borderColor: "lightblue",
      pointRadius: 0
    }]
  },
  options: {
    legend: {
      display: true,
      position: 'bottom'
    },
    scales: {
      yAxes: [{
        ticks: {
          min: 0,
          max: 20,
          stepSize: 5
        }
      }]
    }
  }
});

var maxValues = 10;
var count = 0;
setInterval(() => {
  chart.data.labels.push(++count);
  chart.data.datasets[0].data.push(Math.floor((Math.random() * 20) + 1));
  if (chart.data.labels.length > maxValues) {
    chart.data.labels.shift();
    chart.data.datasets[0].data.shift();
  }
  chart.update();
}, 1000);