自动删除Chart.js中的旧数据点

Question

我有一个实时数据图表，由Javascript更新。

但是，如果脚本运行时间过长，则数据将被塞满。

旧数据必须移到左侧然后删除。

实时演示：https://codepen.io/benni_de/pen/ajGood

代码：

function reLoad() {

  adddata(Math.random() * 100, Math.random() * 10);
  setTimeout(reLoad, 1000);
}

var canvas = document.getElementById('myChart');
var data = {
  datasets: [{
      label: 'Download',
      borderColor: 'rgb(237, 18, 237)',
      fill: false,
      borderWidth: 3
    },
    {
      label: 'Upload',
      borderColor: 'rgb(0, 115, 255)',
      fill: false,
      borderWidth: 3
    }
  ]
}
var options = {
  scales: {
    yAxes: [{
      type: 'linear',
    }],

    xAxes: [{
      type: 'time',
      ticks: {
        maxTicksLimit: 5,
      },
      time: {
        unit: 'second',
        displayFormats: {
          'second': 'HH:mm:ss',
        },
        tooltipFormat: 'HH:mm:ss',
      }
    }]
  },
  showLines: true
};
var myChart = new Chart.Line(canvas, {
  data: data,
  options: options
});

function adddata(download = NaN, upload = NaN, label = moment()) {
  var datasets = myChart.data.datasets;
  myChart.data.labels.push(label);
  datasets[0].data.push(download);
  datasets[1].data.push(upload);
  myChart.update();
}

reLoad();

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myChart" width="400px" height="100px"></canvas>

Answer 1

为使此工作有效，我添加了一个配置变量MAX_DATA_SET_LENGTH，然后在addData()中检查上传/下载数据集的长度是否大于您的配置。

如果数据集大于所需的数据集，则我shift()数据集数组（删除第一个条目）。我也移动/删除了第一个标签，以保持数据的准确性。

如果您仍然想保留所有数据，建议将其保存在Chart.js不使用的单独数组中。

此外，我将代码改为使用setInterval()，因为在这里更有意义。您希望每隔一段时间运行一次addData，而不是在超时后运行一次（即使您通过多次设置超时仍然可以使它工作）

var MAX_DATA_SET_LENGTH = 15;

function reLoad() {
  adddata(Math.random() * 100, Math.random() * 10);
}

var canvas = document.getElementById('myChart');
var data = {
  datasets: [{
      label: 'Download',
      borderColor: 'rgb(237, 18, 237)',
      fill: false,
      borderWidth: 3
    },
    {
      label: 'Upload',
      borderColor: 'rgb(0, 115, 255)',
      fill: false,
      borderWidth: 3
    }
  ]
}
var options = {
  scales: {
    yAxes: [{
      type: 'linear',
    }],

    xAxes: [{
      type: 'time',
      ticks: {
        maxTicksLimit: 5,
      },
      time: {
        unit: 'second',
        displayFormats: {
          'second': 'HH:mm:ss',
        },
        tooltipFormat: 'HH:mm:ss',
      }
    }]
  },
  showLines: true
};
var myChart = new Chart.Line(canvas, {
  data: data,
  options: options
});

function adddata(download = NaN, upload = NaN, label = moment()) {
  var datasets = myChart.data.datasets;
  var labels = myChart.data.labels;
  var downloadDataSet = datasets[0].data;
  var uploadDataSet = datasets[1].data;

  var downloadDataLength = downloadDataSet.length;
  var uploadDataLength = uploadDataSet.length;

  // if upload/download's data set has more than MAX_DATA_SET_LENGTH entries, 
  // remove the first one entry and push on a new data entry
  var didRemoveData = false;
  if (downloadDataLength > MAX_DATA_SET_LENGTH) {
    downloadDataSet.shift();
    didRemoveData = true;
  }

  if (uploadDataLength > MAX_DATA_SET_LENGTH) {
    uploadDataSet.shift();
    didRemoveData = true;
  }

  // if either download or upload data was removed, we also need to remove
  // the first label to keep the data from squeezing in.
  if (didRemoveData) {
    labels.shift();
  }

  labels.push(label);
  downloadDataSet.push(download);
  uploadDataSet.push(upload);
  myChart.update();
}


setInterval(reLoad, 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myChart" width="400px" height="100px"></canvas>