实时更新图表

在 Chart.js 中，通过周期性地修改数据并调用 update() 方法，可以实现实时更新图表的效果。这种方式广泛用于展示传感器数据、系统监控、用户行为数据等实时信息。

下面演示一个简单的实时折线图，每秒生成一个新点并追加到图表中，同时移除最旧的数据点，形成滚动式图表。

(function () {
  const ctx = document.getElementById('liveChart').getContext('2d');
  const labels = Array.from({ length: 10 }, (_, i) => `${i}s`);
  const data = {
    labels,
    datasets: [{
      label: '实时数据',
      data: Array.from({ length: 10 }, () => Math.random() * 100),
      borderColor: 'rgb(255, 99, 132)',
      tension: 0.4
    }]
  };

  const config = {
    type: 'line',
    data,
    options: {
      responsive: true,
      animation: false,
      scales: {
        y: {
          min: 0,
          max: 100
        }
      }
    }
  };

  const chart = new Chart(ctx, config);

  setInterval(() => {
    const newTime = `${parseInt(labels[labels.length - 1]) + 1}s`;
    labels.push(newTime);
    labels.shift();
    chart.data.datasets[0].data.push(Math.random() * 100);
    chart.data.datasets[0].data.shift();
    chart.update();
  }, 1000);
})();

实时更新图表 ​

实时更新图表