基于Chart.js实现带秒级时间轴的实时滚动图表的问题咨询

你的需求完全可以通过Chart.js实现，现有代码的X轴时间显示异常是配置和数据匹配问题，按以下步骤调整即可：

核心问题原因 #

1. Chart.js的time类型X轴依赖日期适配器，你没有引入对应依赖导致时间无法正常解析
2. X轴当前配置的min/max为数字0-500，和time类型要求的时间戳/日期对象格式不匹配
3. labels数组为空，没有传入对应的时间数据和X轴配置匹配
4. 时间格式配置错误，你设置的是hour级的显示格式，和你要的秒级显示不匹配

调整后的完整代码示例 #

// 注意：需要先引入Chart.js和对应日期适配器，比如可以直接引入带内置适配器的完整包
let dataSize = 500;
// 初始化填充空数据和时间点位，避免初始渲染报错
let readings = new Array(dataSize).fill(null);
let labels = new Array(dataSize).fill(null);    

const data = {
  labels: labels,
  datasets: [{
    data: readings,
    borderColor: '#272323',
    pointRadius: 0.5
  }]
};

const config = {
  type: 'line',
  data: data,
  options: {
    animation: false,
    responsive: true,
    maintainAspectRatio: false,
    scales: {
      y: {
        type: 'linear',
        min: 0,
        max: 255
      },
      x: {
        type: 'time',
        time: {
          unit: 'second', // 明确X轴以秒为单位
          displayFormats: {
            second: 'mm:ss' // 秒级刻度显示为 分:秒 格式
          },
          tooltipFormat: 'mm:ss'
        },
        maxTicksLimit: 10 // 限制X轴刻度数量，避免显示拥挤
      }
    }
  }
};

// 初始化图表（你自己的初始化逻辑保留即可）
const myChart = new Chart(
  document.getElementById('yourChartId'),
  config
);

// 实时数据更新逻辑，替换成你自己的数据源即可
setInterval(() => {
  // 移除最旧的1条数据和对应时间标签
  readings.shift();
  labels.shift();
  // 新增当前时间标签和新的采样数据
  labels.push(new Date());
  readings.push(Math.floor(Math.random() * 255)); // 这里替换成你的实际数据
  // 无动画更新图表，性能更好
  myChart.update('none');
}, 1000); // 采样间隔根据你的实际需求调整

额外注意事项 #

• 必须引入对应日期适配器，比如chartjs-adapter-date-fns、chartjs-adapter-moment均可，也可以直接使用内置了适配器的Chart.js完整打包版本
• 如果你的采样频率高于1秒，可以把time.unit改成millisecond，对应调整displayFormats即可实现更高精度的时间显示

内容的提问来源于stack exchange，提问作者ee-diary