如何在Chart.js中设置X轴仅显示年份、提示框显示完整日期？

问题分析 #

1. 初始代码中X轴ticks.callback里的value是标签数组的索引而非日期字符串，直接转成Date会得到1970年（Unix纪元起始）。
2. 设置type: 'time'后图表空白，是因为没有将字符串日期转为Date对象，Chart.js无法解析时间轴数据。

正确解决方案 #

以下是修改后的完整代码，核心是将日期字符串转为Date对象，并正确配置时间轴：

父组件（无需修改，可直接复用）

const datesArray = ["1 May 2023", "2 May 2023", "3 May 2023", "4 May 2023", "5 May 2023"];
const valuesArray = [107.71, 105.98, 106.12, 105.21, 106.215];

const Chart = ({ width }) =>  (
  <ChartDiv style={{ width }} className='cursor-auto'>
    <PriceGraph 
       chartData={{ data: valuesArray, labels: datesArray }} 
       chartColour={'#218B82'} 
       chartFillColour={'#F2FFFF'} 
    />
  </ChartDiv>
);

修改后的PriceGraph组件

import React from 'react';
import { Line } from 'react-chartjs-2';
import { Chart, registerables } from 'chart.js';
import 'chartjs-adapter-date-fns';

Chart.register(...registerables);

const PriceGraph = ({ chartData, chartColour, chartFillColour }) => {
  // 将字符串日期转为Date对象，让Chart.js能正确解析时间轴
  const parsedDates = chartData.labels.map(dateStr => new Date(dateStr));

  const options = {
    scales: {
      x: {
        type: 'time', // 声明X轴为时间类型
        time: {
          unit: 'year', // 按年份聚合刻度
          displayFormats: {
            year: 'yyyy' // 刻度仅显示年份
          },
          tooltipFormat: 'dd MMM yyyy' // 提示框显示完整日期格式
        },
        ticks: {
          autoSkip: true, // 自动跳过重复的年份刻度
          maxRotation: 0 // 避免年份刻度旋转，保持水平显示
        }
      },
      y: {
        beginAtZero: false, // 价格数据无需从0开始，优化可视化效果
        ticks: {
          display: true
        }
      }
    },
    // 可选：自定义提示框标题格式（确保与tooltipFormat一致）
    plugins: {
      tooltip: {
        callbacks: {
          title: (context) => {
            return new Date(context[0].parsed.x).toLocaleDateString('en-GB', {
              day: 'numeric',
              month: 'short',
              year: 'numeric'
            });
          }
        }
      }
    }
  };

  const data = {
    labels: parsedDates,
    datasets: [
      {
        data: chartData.data,
        backgroundColor: chartFillColour,
        borderColor: chartColour,
        fill: true,
      }
    ]
  };

  return <Line data={chartData.labels ? data : null} options={options} />;  
};

export default PriceGraph;

关键修改点说明 #

• 日期解析：将字符串日期转为Date对象，是Chart.js时间轴正常工作的前提。
• 时间轴配置：通过time.displayFormats指定X轴刻度仅显示年份，time.tooltipFormat定义提示框的完整日期格式。
• 可视化优化：关闭y轴beginAtZero，避免价格折线被过度压缩；开启ticks.autoSkip防止同一年份重复显示刻度。

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