自动删除 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.

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

The old Data would have to be shifted to the left side an then be deleted.

现场演示: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屋！