Chart.js（react-chartjs-2）图表网格与数据点不匹配问题排查

你的问题核心是把时间字符串当成了类别轴标签，Chart.js会默认给每个标签分配等宽位置，完全忽略实际的时间间隔，导致数据点和时间刻度错位。以下是具体解决步骤：

1. 安装时间适配器 #

Chart.js的时间轴需要依赖第三方日期适配器，推荐轻量的chartjs-adapter-date-fns：

npm install chartjs-adapter-date-fns date-fns
# 或 yarn add chartjs-adapter-date-fns date-fns

2. 转换数据格式 #

不要分开使用labels和data.values，而是将数据转为{x: Date对象, y: 数值}的结构，让Chart.js能正确解析时间：

// 转换stockdata为标准时间数据格式
const formattedData = Object.entries(stockdata).map(([timeStr, value]) => ({
  x: new Date(timeStr),
  y: value
}));

const data = {
  datasets: [
    {
      data: formattedData,
      borderColor: "rgba(75,192,192,1)",
    },
  ],
};

3. 修改x轴为时间轴配置 #

更新options里的x轴设置，明确指定时间轴类型，并配置时间显示规则：

const options = {
  responsive: true,
  plugins: {
    legend: {
      position: "top",
    },
    title: {
      display: true,
      text: "Chart.js Line Chart",
    },
  },
  pointRadius: 0,
  scales: {
    x: {
      // 关键：设置为时间轴
      type: 'time',
      time: {
        // 解析时间的格式（匹配你的数据格式）
        parser: 'yyyy-MM-dd HH:mm:ssXXX',
        // 刻度单位设为小时
        unit: 'hour',
        // 刻度显示格式（12小时制）
        displayFormats: {
          hour: 'h'
        },
        // 强制从小时刻度开始对齐
        round: 'hour'
      },
      ticks: {
        // 可选：如果需要自定义12小时制显示（比如0转12），保留这个回调
        callback: function(val) {
          const hour = this.getLabelForValue(val).split(' ')[1].split(':')[0];
          const parsedHour = parseInt(hour) % 12;
          return parsedHour === 0 ? 12 : parsedHour;
        },
        maxTicksLimit: 7
      },
      grid: {
        color: "#303030",
      },
      // 确保起始数据（9:30）显示在正确位置
      offset: false
    },
    y: {
      grid: {
        color: "#303030",
      },
    },
  },
};

4. 导入适配器 #

在组件顶部导入时间适配器，让Chart.js能识别时间格式：

import { Line } from 'react-chartjs-2';
import 'chartjs-adapter-date-fns';

原理说明 #

• 原来的类别轴会把每个时间字符串当作独立的分类，等间距排列，完全不考虑9:30到10:00只有30分钟、而其他小时是60分钟的差异。
• 改为时间轴后，Chart.js会根据实际时间间隔计算数据点的位置，9:30会自然落在9点刻度的后半段，10:16也会准确对应10点刻度后的16分钟位置。

内容的提问来源于stack exchange，提问作者Notorious776