Chart.js自定义X轴标签问题：如何仅显示日期日份？

问题出在使用parsing配置后，X轴ticks.callback的value参数返回的是数据索引而非原始日期值。要获取原始日期并提取日份，可按以下步骤修改：

修改X轴ticks回调函数 #

将原箭头函数改为普通函数（确保能访问this.chart实例），然后从原始数据集中获取对应日期并处理：

// 修正后的options
scales: {
  y: {
    beginAtZero: true,
  },
  x: {
    ticks: {
      display: true,
      // 改用普通函数，箭头函数无法访问this.chart
      callback: function(value, index) {
        // 从第一个数据集的原始数据中获取对应日期对象
        const dataItem = this.chart.data.datasets[0].data[index];
        // 提取日期中的日份（两种方式可选）
        // 方式1：字符串拆分（适用于固定格式的日期）
        const day = dataItem.label.split('-')[2];
        // 方式2：用Date对象解析（更健壮，支持不同日期格式）
        // const date = new Date(dataItem.label);
        // const day = date.getDate().toString();
        return day;
      }
    },
  },
},
parsing: {
  xAxisKey: 'label',
  yAxisKey: 'value'
}

关键说明 #

• 使用普通函数：箭头函数会绑定外部上下文，无法访问this.chart，因此必须改用普通函数来获取图表实例。
• 获取原始数据：通过this.chart.data.datasets[0].data[index]可以拿到你定义的原始数据对象（包含label和value），再从中提取日期进行处理。
• 日期处理方式：如果你的日期格式固定为YYYY-MM-DD，直接拆分字符串更高效；如果格式不固定，建议用Date对象解析后调用getDate()获取日份。

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