Chart.js 3.9.1：X轴仅显时间、悬浮显完整时间戳的实现方法

完全可以实现你的需求，具体操作基于Chart.js v3.9.1的轴配置和tooltip自定义功能，步骤如下：

1. 核心配置思路 #

• 将X轴设置为时间类型，通过日期格式化规则只显示时分部分
• 自定义tooltip回调，让鼠标悬浮时返回原始的完整时间戳

2. 具体代码实现 #

首先确保你的项目中已引入Chart.js v3.9.1，若使用时间轴类型，还需引入对应的日期适配器（比如chartjs-adapter-date-fns），之后在图表配置中添加以下关键设置：

const chart = new Chart(document.getElementById('your-chart-id'), {
  type: 'line', // 你的图表类型，比如折线图
  data: {
    labels: ['2022-12-16 08:18:58', '2022-12-16 09:25:30', '2022-12-16 10:40:15'], // 你的原始日期时间数据
    datasets: [{
      data: [12, 19, 3],
      borderColor: '#36a2eb',
      fill: false
    }]
  },
  options: {
    scales: {
      x: {
        type: 'time',
        // 配置日期解析规则，匹配你的原始数据格式
        time: {
          parser: 'yyyy-MM-dd HH:mm:ss',
          // 设置X轴标签的显示格式，只展示时分
          displayFormats: {
            hour: 'HH:mm'
          },
          // 强制使用指定的显示格式
          unit: 'hour'
        },
        title: {
          display: true,
          text: '时间'
        }
      }
    },
    plugins: {
      tooltip: {
        callbacks: {
          // 自定义tooltip的标题，返回完整时间戳
          title: function(context) {
            return context[0].label;
          }
        }
      }
    }
  }
});

3. 替代方案（无需日期适配器） #

如果不想额外引入适配器，也可以直接通过字符串处理实现，将X轴设为分类类型后自定义标签显示逻辑：

options: {
  scales: {
    x: {
      type: 'category',
      ticks: {
        // 拆分字符串，仅显示时分部分
        callback: function(value) {
          const label = this.getLabelForValue(value);
          return label.split(' ')[1].slice(0, 5);
        }
      }
    }
  },
  plugins: {
    tooltip: {
      callbacks: {
        title: function(context) {
          return context[0].label;
        }
      }
    }
  }
}

这种方式无需依赖适配器，但如果后续日期格式变动，需要手动调整字符串处理逻辑，灵活性不如时间轴类型。

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