Chart.JS - 配置 x 轴以显示 data.labels 中完整日期的小时数，但它仍然显示下面的原始标签

Question

chart.js：4.4.2

日期-fns：2.30

chartjs-适配器-日期-fns：3.0.0

我想截断 x 轴，因为日期以“YYYY:MM:DD HH:MM:SS”格式标记。我通过

options.scales.x.ticks

和

options.scales.x.time

实现了这一点。但是，我仍然显示原始的 x 轴，这是不必要的。

import 'chartjs-adapter-date-fns';
import { enUS } from 'date-fns/locale';
import { ForecastObj } from './appTypes.types';

export async function renderChart(forecast: ForecastObj[]) {
  const chartCtr = document.querySelector('#temp-chart') as HTMLCanvasElement;

  new Chart(chartCtr, {
    type: 'line',
    options: {
      animation: false,
      scales: {
        xAxis: {
          adapters: {
            date: {
              locale: enUS,
            },
          },
          type: 'time',
          ticks: {
            stepSize: 3,
            major: {
              enabled: true,
            },
          },
          time: {
            unit: 'hour',
            tooltipFormat: 'HH:mm',
          },
        },
      },
    },
    data: {
      labels: forecast.map((row) => row.date),
      datasets: [
        {
          label: 'temp every 3 hrs',
          data: forecast.map((row) => row.temp),
        },
      ],
    },
  });
}

我想删除下部的 x 轴（原始）。

Answer 1

当您使用

xAxis

时，它会创建另一个 x 轴，而不是替换原始 x 轴。您应该使用

x

作为

scaleId

而不是

xAxis

。

scales: {
  x: {
    ...
  }
}

演示@StackBlitz

参考：默认比例