Chart.js 4.2.1时间轴：仅日期变化时显示日期刻度的需求

针对你使用Chart.js 4.2.1构建时间轴折线图时，需要仅在日期变化的刻度显示完整日期、其余刻度只显示小时的需求，可以通过自定义刻度回调函数实现，具体步骤如下：

核心思路 #

利用Chart.js的ticks.callback配置项，在回调中对比当前刻度与上一刻度的日期：

• 若日期不同，显示「小时 + 日期」（通过换行让日期单独一行）
• 若日期相同，仅显示小时

同时在回调外维护一个变量，用于记录上一个刻度的日期，实现跨回调的状态跟踪。

代码示例 #

// 初始化变量，记录上一个刻度的日期
let prevDate = null;

const chart = new Chart(document.getElementById('myChart'), {
  type: 'line',
  data: {
    datasets: [{
      label: '数据系列',
      data: [
        {x: '2024-01-01T05:00:00', y: 10},
        {x: '2024-01-01T15:00:00', y: 20},
        {x: '2024-01-02T01:00:00', y: 15},
        {x: '2024-01-02T15:00:00', y: 25},
        {x: '2024-01-03T11:00:00', y: 18},
        {x: '2024-01-03T21:00:00', y: 22},
        {x: '2024-01-04T07:00:00', y: 16}
      ],
      borderColor: 'rgb(75, 192, 192)',
      tension: 0.1
    }]
  },
  options: {
    scales: {
      x: {
        type: 'time',
        time: {
          unit: 'hour', // 按小时生成刻度
          tooltipFormat: 'YYYY-MM-DD HH:mm'
        },
        ticks: {
          // 自定义刻度显示逻辑
          callback: function(value, index, ticks) {
            const currentDate = new Date(value);
            const currentDay = currentDate.toDateString(); // 获取日期字符串用于对比
            const hourStr = currentDate.toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'}); // 格式化小时

            let displayStr = hourStr;
            // 对比当前日期与上一个刻度的日期
            if (!prevDate || currentDay !== prevDate) {
              // 日期不同时，添加日期（换行实现两行显示）
              const dateStr = currentDate.toLocaleDateString([], {month: 'short', day: 'numeric'});
              displayStr = `${hourStr}\n${dateStr}`;
              // 更新上一个日期
              prevDate = currentDay;
            }

            return displayStr;
          },
          // 允许标签换行，设置旋转角度为0
          maxRotation: 0,
          minRotation: 0,
          padding: 10 // 增加内边距避免标签重叠
        }
      },
      y: {
        beginAtZero: true
      }
    }
  }
});

关键说明 #

1. 日期对比逻辑：使用toDateString()获取日期的字符串表示（如Mon Jan 01 2024），确保仅当日期真正变化时才显示日期标签。
2. 标签格式化：通过toLocaleTimeString和toLocaleDateString实现本地化的时间/日期显示，可根据需求调整参数（如月份格式、是否显示年份）。
3. 换行显示：在回调中返回带\n的字符串，并设置maxRotation: 0，让标签自动换行，实现类似你示例中的两行显示效果。
4. 状态维护：通过外部变量prevDate跟踪上一个刻度的日期，确保跨回调的对比逻辑生效。

注意事项 #

• 如果数据时间跨度较大，可调整time.unit为合适的单位（如day），回调逻辑依然适用。
• 若需要更精确的日期对比（如忽略时区影响），可使用currentDate.setHours(0,0,0,0)将时间置为0后再对比时间戳。

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