自动删除Chart.js中的旧数据点 [英] Auto-Remove old Datapoints in Chart.js

问题描述

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

I have a Chart for Real time data, which is updated by Javascript.

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

But if the script runs to long, the data is getting crammed up.

旧数据必须移至

实时演示： 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>

推荐答案

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

To make this work, I added a config var MAX_DATA_SET_LENGTH and then in addData() I check to see if the length of either the upload/download data set is greater than your config.

如果数据集大于您想要的长度，我 shift（）数据集数组（删除第一个条目）。我也移位/删除了第一个标签，以保持数据的准确性。

If the data set is larger than you want, I shift() the data set array (remove the first entry). I also shift/remove the first label too to keep the data accurate.

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

If you would still like to keep all the data, I would suggest keeping it in a separate array that Chart.js does not use.

此外，我将代码切换为使用 setInterval（）代替，因为在这里更有意义。您想以一定的间隔运行addData，而不是在超时后运行一次（即使您仍然可以通过设置多次超时来使其运行）

Also, I switched the code to use setInterval() instead since it makes more sense here. You want to run addData on an interval instead of once after a timeout (even though you still make it work by setting the timeout multiple times)

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>

这篇关于自动删除Chart.js中的旧数据点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！