如何实现Plotly.js图表日期的本地区域语言翻译？

核心实现方式 #

Plotly.js 支持通过布局配置实现日期月份、星期名称的多语言适配，无需手动转换所有日期字符串，同时能保留日期轴的交互特性（缩放、平移等）。以下是两种可行方案：

1. 利用内置区域配置 #

Plotly 支持通过 locale 参数指定目标区域，自动适配对应的月份/星期名称。需确保已加载对应区域的本地化文件（完整包通常包含主流语言，按需加载需引入对应 plotly-locale-xx.js 文件），然后在布局中设置：

// 示例：设置俄语区域
var layout = {
  xaxis: {
    type: 'date',
    tickformat: '%b %Y' // 缩写月份+年份格式，会随locale自动翻译
  },
  locale: 'ru'
};

Plotly.newPlot('myDiv', data, layout);

设置 locale: 'ru' 后，%b 会渲染为俄语月份缩写（如"янв"对应英文"Jan"），%B 则显示完整月份名称（"январь"），英文区域下会自动显示"Jan 2023"这类格式。

2. 自定义本地化文本（无需依赖locale文件） #

如果不想加载额外locale文件，可结合应用的多语言配置，通过 tickformatstops 自定义不同语言下的日期显示文本：

// 示例：根据当前应用语言动态生成显示文本
var currentLang = 'ru'; // 从AngularJS的多语言服务获取当前语言
var monthNames = {
  en: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  ru: ['янв', 'фев', 'мар', 'апр', 'май', 'июн', 'июл', 'авг', 'сен', 'окт', 'ноя', 'дек']
};

var layout = {
  xaxis: {
    type: 'date',
    tickformatstops: [{
      dtickrange: [null, 'M1'], // 针对月级刻度
      value: function(d) {
        var date = new Date(d);
        return `${monthNames[currentLang][date.getMonth()]} ${date.getFullYear()}`;
      }
    }]
  }
};

Plotly.newPlot('myDiv', data, layout);

这种方式完全可控，能精准匹配应用的多语言体系，同时不影响日期轴的原生交互。

3. 自动适配浏览器区域 #

若需自动匹配用户浏览器语言，可通过 navigator.language 获取区域信息，再对应设置：

var userLocale = navigator.language || navigator.userLanguage;
var langCode = userLocale.split('-')[0]; // 提取核心语言代码，如'ru-RU'取'ru'

var layout = {
  xaxis: {
    type: 'date',
    tickformat: '%b %Y'
  },
  locale: langCode
};

注意：需确保Plotly已加载对应语言的locale文件，否则会回退到默认英文。

关键注意事项 #

• 务必保留原始ISO日期格式（2022-11-01T06:01:00.000Z）传入Plotly，不要提前转换为本地化字符串，否则会丢失日期轴的时间缩放、平移等交互功能。
• 使用 tickformatstops 时，需根据刻度的时间范围（日、月、年等）设置对应的 dtickrange，确保不同缩放级别下的显示都适配正确。

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