ChartJS：如何将X轴月份翻译为其他语言

嘿，你遇到的这个问题其实是ChartJS默认时间模块使用英文本地化导致的，不用自己手动写time.parser就能搞定，下面给你两种常用的解决方案，根据你用的ChartJS版本和时间适配器来选：

方案一：使用moment.js适配器（适合ChartJS v2或v3） #

ChartJS默认的时间处理依赖moment.js（v3版本需要单独安装chartjs-adapter-moment），步骤如下：

• 首先确保你已经引入了moment.js，然后加载对应语言的本地化文件（比如法语）：

  // 引入moment和法语语言包
  import moment from 'moment';
  import 'moment/locale/fr';
  
  // 全局设置moment的语言为法语
  moment.locale('fr');
  

• 然后在你的Chart配置里，xAxes（v3版本为x）的time选项中，只需要保留displayFormats，ChartJS会自动使用moment的本地化设置来渲染月份：

  options: {
    scales: {
      x: {
        type: 'time',
        time: {
          displayFormats: {
            month: 'MMM YYYY' // 现在会显示成「Mai 2018」
          }
        }
      }
    }
  }
  

  如果你不想全局设置语言，也可以在Chart的time选项里单独指定locale：

  time: {
    locale: 'fr',
    displayFormats: {
      month: 'MMM YYYY'
    }
  }
  

方案二：使用date-fns适配器（ChartJS v3+推荐） #

如果你的项目用的是date-fns而非moment.js，需要安装对应适配器和语言包：

• 先安装依赖：

  npm install chartjs-adapter-date-fns date-fns/locale/fr
  

• 然后在代码中引入并配置：

  import { fr } from 'date-fns/locale';
  import 'chartjs-adapter-date-fns';
  
  // 在Chart配置里指定locale
  options: {
    scales: {
      x: {
        type: 'time',
        time: {
          locale: fr,
          displayFormats: {
            month: 'MMM yyyy' // date-fns格式符与moment略有差异，MMM为缩写月份，yyyy为4位年份
          }
        }
      }
    }
  }
  

关于time.parser的补充说明 #

其实你提到的time.parser主要用于自定义解析特殊格式的日期数据，而非本地化。比如如果你的原始日期数据格式比较特殊（比如"2018-05"），ChartJS无法自动识别时，才需要用parser手动解析：

time: {
  parser: function(date) {
    // 自定义解析逻辑，将特殊格式转为日期对象
    return moment(date, 'YYYY-MM').toDate();
  },
  displayFormats: {
    month: 'MMM YYYY'
  }
}

但对于本地化需求，用上面的适配器+语言包的方法更简单可靠，不需要自己处理月份的翻译逻辑。

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