ChartJS 3.x时间刻度下月份与日期名称如何实现本地化？

配置失效原因 #

ChartJS 3.x的time类型坐标轴本身不内置日期格式化能力，需要依赖第三方日期处理库（date-fns、Luxon、Moment.js均可）和对应的ChartJS适配器实现本地化，仅单独设置options.locale参数无法生效。

具体实现步骤（以date-fns适配器为例，适用性最广） #

• 第一步：安装所需依赖

npm install chart.js@3.x date-fns chartjs-adapter-date-fns

• 第二步：引入依赖和对应本地化语言包

import { Chart } from 'chart.js';
import 'chartjs-adapter-date-fns';
// 引入对应语言的locale资源，以简体中文、意大利语为例
import { zhCN, it } from 'date-fns/locale';

• 第三步：图表配置中关联本地化配置
  需要同时在options.locale和时间轴的adapters.date配置中指定对应locale，示例配置如下：

const chart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    // 全局locale配置
    locale: 'it-IT',
    scales: {
      x: {
        type: 'time',
        time: {
          unit: 'month',
          // 自定义显示格式可按需求调整，会自动适配传入的locale
          displayFormats: {
            month: 'MMMM'
          }
        },
        // 适配器绑定对应语言包
        adapters: {
          date: {
            locale: it
          }
        }
      }
    }
  }
});

注意事项 #

• 若使用Luxon或Moment.js作为日期处理库，只需替换为对应的chartjs-adapter-luxon或chartjs-adapter-moment适配器，按照对应库的规则引入locale资源即可，配置逻辑一致。
• 时间刻度的显示格式可通过time.displayFormats自定义，格式规则遵循你选用的日期处理库的语法。

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