如何在Chart.js的X轴预定义24小时时间刻度（00:00等）

核心修改思路 #

通过自定义X轴的ticks与time配置，强制指定显示的固定时间标签，同时确保数据的时间值能正确映射到轴上对应区间。

具体代码修改 #

假设你当前图表配置包含options.scales.x，将其替换为以下结构：

options: {
  scales: {
    x: {
      type: 'time',
      time: {
        // 匹配你的数据时间格式，若含日期则改为'YYYY-MM-DD HH:mm'
        parser: 'HH:mm',
        unit: 'hour',
        displayFormats: {
          hour: 'HH:mm'
        }
      },
      ticks: {
        callback: function(value, index, values) {
          // 定义固定显示的时间标签数组
          const fixedLabels = ['00:00', '06:00', '12:00', '18:00', '23:59'];
          // 仅返回指定索引的标签，其余位置不显示
          return fixedLabels[index] || '';
        },
        maxTicksLimit: 5,
        autoSkip: false
      },
      // 锁定X轴时间范围，确保所有固定标签完整显示
      min: '00:00',
      max: '23:59'
    }
  }
}

关键配置说明 #

• time.parser：必须与你数据中时间字段的格式完全匹配，若数据带秒（如17:19:30），可改为'HH:mm:ss'，Chart.js会自动解析并映射到对应区间。
• ticks.callback：通过自定义回调精准控制显示的标签内容，仅在指定索引位置返回固定时间文本。
• min/max：设置X轴的时间边界为00:00到23:59，保证5个固定刻度全部显示，同时让17:19-18:10的数据自动落在对应区间内。
• autoSkip: false：禁止自动跳过刻度，确保我们指定的所有标签都能正常展示。

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