如何在Chart.js中配置X轴以DD/MM格式显示日期？

• 用parseInt处理日期字符串会直接截断字符串取开头的数字，比如"3/12/2024"经parseInt转换后只得到数字3，月、年信息完全丢失，时间轴无法识别为合法时间值
• Chart.js v3及以上版本的time轴不再内置时间解析能力，必须搭配独立的时间适配器使用，旧版本的parser配置单独写不会生效，也无法自动格式化日期显示

1. 安装time轴必需依赖 #

time轴本身不包含时间解析、格式化逻辑，需要先安装对应适配器和日期处理库：

npm install chartjs-adapter-date-fns date-fns

在图表组件文件顶部引入适配器，注册到Chart实例：

import { Chart } from 'react-chartjs-2';
import 'chartjs-adapter-date-fns';

2. 正确清洗接口返回的日期数据 #

禁止用parseInt处理日期字符串，拿到原始格式为d/m/yyyy/dd/m/yyyy的StartD字段后，统一转换为time轴可识别的合法时间戳：

// axios拿到接口返回数据后的处理逻辑
const chartDataSet = res.data.map(item => {
  // 按/拆分日期，单位数、双位数的日月都可以通过split正确拆分
  const [day, month, year] = item.StartD.split('/').map(Number);
  // JS Date的月份从0开始计数，所以传入的月份值要减1
  const formatDate = new Date(year, month - 1, day);
  return {
    x: formatDate.getTime(), // 传入标准时间戳，time轴可直接识别
    y: item.Cost
  }
});

3. 正确配置X轴参数 #

移除无效的旧版parser配置，指定time轴的显示规则：

const chartOptions = {
  responsive: true,
  scales: {
    x: {
      type: 'time',
      time: {
        unit: 'day',
        // 配置X轴刻度展示为要求的DD/MM格式，不足两位自动补0
        displayFormats: {
          day: 'dd/MM'
        }
      },
      ticks: {
        source: 'data' // 刻度严格匹配传入的数据点，不会自动生成多余日期刻度
      }
    },
    y: {
      beginAtZero: true
    }
  }
};

4. 组装图表配置传入组件 #

不需要单独传labels数组，直接把处理好的数据集传入即可：

const chartData = {
  datasets: [
    {
      label: '消费金额',
      data: chartDataSet,
      backgroundColor: '#165DFF'
    }
  ]
};

// 组件内渲染
<Bar data={chartData} options={chartOptions} />

注意：如果使用react-chartjs-2 v4+版本，需要提前在组件顶部注册所有用到的Chart.js组件（BarController、BarElement、TimeScale、LinearScale等），否则轴类型会识别失败。

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