is there a way to do automatic scrolling?

问题

Kian here,

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

so like when it reaches here

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?

回答1:

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

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>

来源：https://stackoverflow.com/questions/61575801/is-there-a-way-to-do-automatic-scrolling

标签

chart.js