让传入的数据通过Chart.JS中的固定时间框架

Question

我已使用图表js绘制了温度传感器数据。我需要将X轴框架固定为30秒，并让传入的温度数据通过固定框架，然后更新X轴值。我当前的代码确定了时间范围，但是30秒钟后，数据将覆盖之前的数据，并且每30秒钟重复一次。您可以在下面看到代码。

<script>
  var chart = {
    type: 'line',
    data: {
      labels: [],
      datasets: [{
        label: 'Room',
        borderColor: '#17A2B8',
        data: [],
        fill: true,
        backgroundColor: '#B3D9E0'
      }]
    },
    options: {
      scales: {
        xAxes: [{
          type: 'time',
          time: {
            min: TimeMin,
            max: TimeMax
          },
          display: true,
          scaleLabel: {
            display: true,
            labelString: 'Time'
          }
        }],
        yAxes: [{
          display: true,
          scaleLabel: {
            display: true,
            labelString: 'Temperature'
          }
        }]
      }
    }
  };

  window.onload = function() {
    var ctx = document.getElementById('myChart').getContext('2d');
    window.myLine = new Chart(ctx, chart);
  };

  //Get the current second
  var d = new Date();
  var s = d.getSeconds();
  var TimeMin = s;
  var TimeMax = s + 30;

  function addData(tempData){
    d = new Date();
    if (chart.data.datasets.length > 0) {
      chart.data.labels.push(d.getHours() + d.getMinutes() + d.getSeconds());
      chart.data.datasets.forEach(function(dataset) {
        dataset.data.push(tempData);
      });
      window.myLine.update();
    }
  }
</script>

我已经定义了TimeMin和TimeMax变量，并将它们分别设置为以秒为单位的当前时间和以30秒为单位的当前时间，并将它们置于xAxes选项中； min: TimeMin和max: TimeMax。有人可以帮助我让数据通过固定的时间范围，而不是覆盖以前的时间范围吗？]

提前感谢。

Answer 1

无需设置TimeMin和TimeMax。例如，应该每30秒调用一次函数，并删除图表上显示的标签和数据的第一个元素。请参见下面更新的addData()功能。

function addData(sensorData){
    d = new Date();
    if (chart.data.datasets.length > 0) {
      chart.data.labels.push('(' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds() + ') ' + d.getFullYear() + '-' + (d.getMonth()+1) + '-' + d.getDate());
      //The setTimeout function is called every 30 seconds and runs the "Action" function.
      setTimeout(Action, 30000);
      chart.data.datasets.forEach(function(dataset) {
        dataset.data.push(sensorData);
      });
      //The Action function removes the first element of displayed labels and pushed data.
      function Action() {
        chart.data.labels.shift();
        chart.data.datasets.forEach(function(dataset) {
          dataset.data.shift();
        });
      }
    window.myLine.update();
    }
  };