Есть ли способ сделать автоматическую c прокрутку? - PullRequest
Новая
       61

Есть ли способ сделать автоматическую c прокрутку?

0 голосов
/ 03 мая 2020

Киан,

Я пытаюсь поместить данные в диаграмму JS и автоматически прокручивать их, когда достигает конца

, например, когда он достигает здесь enter image description here

он будет продолжать добавлять данные без необходимости прокрутки пользователем, есть ли способы сделать это без полосы прокрутки внизу?

1 Ответ

1 голос
/ 03 мая 2020

Автоматическая c прокрутка без видимой полосы прокрутки означает, что пользователь никогда не сможет снова увидеть данные, которые были прокручены из видимой области. Если это то, что вам нужно, вы можете просто удалить устаревшие значения labels и dataset, как только будет достигнут определенный предел. Это можно сделать с помощью Array.shift(), который удаляет первый элемент из 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 метки и значения. По достижении этого предела устаревшие метки и значения удаляются. 

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>
...