如何制作像包 express-status-monitor 中的实时更新图表？

Question

图表如下所示 THIS GIF (image taken from https://github.com/RafalWilinski/express-status-monitor)

像上面图表中的gif有更新时间的描述。而我要使用的数据来自api.

也许可以使用 chartjs 和 socket.io。如何实现？

Answer 1

每次有新值可用时，将其添加到 dataset.data。一旦达到某个值的限制，通过 Array.shift() 删除最旧的值。 dataset.data 更新后，您需要调用 chart.update().

请查看下面的可运行代码，看看它是如何工作的。请注意，此代码使用 setInterval().

模拟 API

var chart = new Chart('chart', {
  type: 'line',
  data: {
    datasets: [{
      data: [],
      fill: false,
      lineTension: 0.1,
      borderColor: 'black',
      pointRadius: 0
    }]
  },
  options: {
    plugins: {
      legend: {
        display: false
      },
      tooltip: {
        enabled: false
      }
    },
    scales: {
      x: {
        type: 'time',
        time: {
          unit: 'second',
          displayFormats: {
            second: 'h:m:s a'
          }
        },
        grid: {
          display: false,
          drawBorder: false
        },
        ticks: {
          maxTicksLimit: 3,
          maxRotation: 0
        }
      },
      y: {
        min: 0,
        max: 10,
        ticks: {
          stepSize: 2
        }
      }
    }
  }
});

var maxValues = 20;
setInterval(() => {  
  const data = chart.data.datasets[0].data;
  const v = Math.floor((Math.random() * 9) + 1);  
  if (data.length >= maxValues) {
    data.shift();
  }
  data.push({ x: new Date(), y: v });
  chart.update();
}, 300);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0"></script>
<canvas id="chart" height="80"></canvas>

如何制作像包 express-status-monitor 中的实时更新图表？

how to make realtime update chart like in package express-status-monitor?

socket.io

chart.js