Chart.js配置X轴仅显示小时，如何移除原始X轴标签？

你遇到的问题核心是配置了自定义X轴但未禁用默认X轴，同时存在轴ID不匹配、日期解析规则缺失的问题，导致双轴共存。以下是两种直接可行的修复方案：

方案一：修正默认轴配置（推荐） #

Chart.js 4.x 默认X轴的ID为x，而非xAxis。直接针对默认轴配置，同时显式关闭可能存在的冗余轴：

new Chart(chartCtr, {
  type: 'line',
  options: {
    animation: false,
    scales: {
      // 禁用冗余的自定义轴（若之前误配置）
      xAxis: {
        display: false
      },
      // 配置主X轴（默认ID为x）
      x: {
        adapters: {
          date: {
            locale: enUS,
          },
        },
        type: 'time',
        ticks: {
          stepSize: 3,
          major: {
            enabled: true,
          },
        },
        time: {
          unit: 'hour',
          tooltipFormat: 'HH:mm',
          // 强制匹配你的日期格式，避免解析异常
          parser: 'yyyy:MM:dd HH:mm:ss'
        },
      },
    },
  },
  data: {
    labels: forecast.map((row) => row.date),
    datasets: [
      {
        label: '每3小时气温',
        data: forecast.map((row) => row.temp),
        // 绑定数据集到目标轴
        xAxisID: 'x'
      },
    ],
  },
});

方案二：使用自定义轴并隐藏默认轴 #

如果偏好自定义轴ID，需确保数据集绑定到该轴，并关闭默认的x轴：

new Chart(chartCtr, {
  type: 'line',
  options: {
    animation: false,
    scales: {
      // 关闭默认X轴
      x: {
        display: false
      },
      // 自定义X轴并指定ID
      xAxis: {
        id: 'xAxis',
        adapters: {
          date: {
            locale: enUS,
          },
        },
        type: 'time',
        ticks: {
          stepSize: 3,
          major: {
            enabled: true,
          },
        },
        time: {
          unit: 'hour',
          tooltipFormat: 'HH:mm',
          parser: 'yyyy:MM:dd HH:mm:ss'
        },
      },
    },
  },
  data: {
    labels: forecast.map((row) => row.date),
    datasets: [
      {
        label: '每3小时气温',
        data: forecast.map((row) => row.temp),
        // 绑定到自定义轴ID
        xAxisID: 'xAxis'
      },
    ],
  },
});

关键注意点 #

• 必须添加time.parser匹配你的日期格式YYYY:MM:DD HH:MM:SS，否则Chart.js可能无法正确解析日期，导致轴渲染混乱。
• 数据集的xAxisID必须与配置的轴ID完全一致，避免出现轴绑定失效的情况。

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