Chart.js 2.7 x轴单位设为day时时间柱状图无法渲染数据点问题

开发者阿泽

2026-8-27

问题原因

你的配置存在和Chart.js 2.7版本时间轴机制不匹配的错误，day单位下不显示数据不是数据本身的问题，是写法和配置缺项导致的：

首先是传值逻辑错误：Chart.js 2.x的time类型x轴是连续数值轴（底层用时间戳做坐标计算），不支持从顶层data.labels数组读取时间做数据点映射。你把时间存在labels里、data存纯数字的写法是分类轴的用法，框架只会拿labels生成x轴刻度，不会把数字数据和对应的时间点做坐标绑定。你把单位改成hour能看到数据是偶然现象：hour单位下刻度密度高，框架的容错逻辑碰巧把数据的数组索引（0、1）映射到了可视区的刻度位置，此时数据点对应的时间是完全错误的，只是碰巧能看到柱子而已。
其次是缺少柱状图必备的轴偏移配置：连续时间轴默认offset为false，刻度线会对齐轴的边缘，柱状图在这种配置下会以刻度线为中心渲染，当单位为day时，柱子要么被裁切掉，要么因为坐标映射错误窄到肉眼不可见。
最后是存在无效配置：你写在options.plugins下的legend配置是Chart.js 3.x版本的语法，2.7版本完全不识别，虽然不影响数据渲染，但属于冗余代码。
额外提醒：Chart.js 2.7的时间轴依赖moment.js做时间解析，如果没有在加载Chart.js之前引入moment.js，时间解析本身就会出问题。

修复步骤

删掉data下的顶层labels字段，不要用它存储时间值。
把数据集的data从纯数字数组，改成带x（时间）、y（数值）属性的对象数组，你的示例数据对应写法如下：
```
data: [
  {x: "2022-06-30T16:24:07.713+05:00", y: 1},
  {x: "2022-07-07T15:23:02.742+05:00", y: 11}
]
```
在x轴配置项里加上offset: true，避免柱子被轴边缘裁切，同时删掉无效的v3版本plugins配置。

修正后可直接运行的完整配置：

{
  type: 'bar',
  data: {
    datasets: [
      // 可在此处补充柱子样式配置，比如backgroundColor、borderColor等
      {
        data: [
          {x: "2022-06-30T16:24:07.713+05:00", y: 1},
          {x: "2022-07-07T15:23:02.742+05:00", y: 11}
        ]
      }
    ]
  },
  options: {
    legend: {
      display: false
    },
    maintainAspectRatio: false,
    scales: {
      xAxes: [{
        offset: true, // 时间轴柱状图必填配置
        ticks: {
          autoSkip: true
        },
        scaleLabel: {
          display: true,
          labelString: 'Pinged At (Date and Time)'
        },
        type: "time",
        time: {
          unit: 'day',
          unitStepSize: 1,
          stepSize: 1
        }
      }],
      yAxes: [{
        scaleLabel: {
          display: true,
          labelString: 'Response Time (ms)'
        }
      }]
    }
  }
}

用这个配置后，不管x轴单位设为day、hour还是其他时间单位，柱子都能正常渲染，且数据点和时间刻度是准确对应的。

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