有没有办法进行自动滚动? [英] is there a way to do automatic scrolling?

问题描述

这里是基安，

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

I'm trying to put data into chartJS and have it automatically scroll when it reaches the end

就像它到达这里时一样

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

it will keep adding data without the user having to scroll, is there any ways that I can do this without the scroll bar at the bottom?

推荐答案

没有可见滚动条的自动滚动意味着用户再也看不到滚动到可见区域之外的数据.如果这是您想要的，您可以在达到某个限制后简单地删除过时的 labels 和 dataset 值.这可以使用 Array 来完成.shift()，从 array 中移除第一个元素.

Automatic scrolling without visible scroll bar would means that the user can never see data again that was scrolled out of the visible area. If this is what you want, you can simply remove outdated labels and dataset values once a certain limit is reached. This can be done using Array.shift(), which removes the first element from an array.

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

请查看下面允许最多 10 个标签和值的可运行代码段.一旦达到此限制，就会删除过时的标签和值.

Please have a look at the runnable code snippet below that allows up to 10 labels and values. Once this limit is reached, outdated labels and values are removed.

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="canvas" height="100"></canvas>

这篇关于有没有办法进行自动滚动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！