使用 chart.js 的实时滚动图表

Question

我想创建带有滚动时间的实时图表，例如以下视频：https://www.youtube.com/watch?v=2-tnkzG0sKU

chart.js 可以做到这一点吗？到目前为止，我有以下内容，它正在滚动但时间没有显示，我想以秒为单位显示。

let dataSize = 500;
let readings = new Array(dataSize);    
// data object for the chart:
const data = {
  // X axis labels
  labels: new Array(),
  datasets: [{
    data: readings,         // the data to chart
    borderColor: '#272323', // line color (lavender)
    pointRadius: 0.5          // point size
  }]
};

const config = {
  type: 'line',         // type of chart
  data: data,           // the data
  options: {
    animation: false,   // remove animation to speed drawing up
    responsive: true,
    maintainAspectRatio: false,
    scales: {           // axis ranges:
      y: {
        type: 'linear',
        min: 0,
        max: 255
      },
      x:{
      //  ticks:{
          type: 'time',
          time:{
            //unit:'second',
            displayFormats: {hour: 'mm:ss'}
          },
          min:0,
          max: dataSize,
          //beginAtZero: true,
          maxTicksLimit: dataSize/2
        //}
      }
    }
  }
};

谢谢

Answer 1

实现这一点的最简单方法是使用 chart.js 的流插件： https://nagix.github.io/chartjs-plugin-streaming/master/guide/#table-of-contents

您会在 onRefresh 中添加数据的地方得到类似的结果。

npm i chartjs-plugin-streaming

import ChartStreaming from 'chartjs-plugin-streaming';
import 'anyDatAdapterFromAhichDateLibYouAreUsing';

Chart.register(ChartStreaming);

const myChart = new Chart(ctx, {
  options: {
    scales: {
      x: {
        type: 'realtime',
        realtime: {
          onRefresh: function(chart) {
            chart.data.datasets.forEach(function(dataset) {
              dataset.data.push({
                x: Date.now(),
                y: Math.random()
              });
            });
          }
        }
      }
    }
  }
});