Highcharts 日期时间本地化

Posted

技术标签:

【中文标题】Highcharts 日期时间本地化【英文标题】:Highcharts DateTime Localization 【发布时间】:2011-11-17 04:12:14 【问题描述】:

谁能指出我如何本地化在 HighCharts js 文件中硬编码的与日期相关的字符串。例如,我希望图表显示本地化值“Fév”,而不是 x 轴中的默认“Feb”日期标签。我尝试通过在实例化图表之前设置语言对象上的选项来实现本地化:

Highcharts.setOptions(
lang: 
    months: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
    weekdays: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi']
 );

但图表仍显示默认值。

jsFiddle 有问题。

【问题讨论】:

你能提供一个小提琴或一些更底层的代码吗?如果您使用的是最新版本的 Highcharts,您所描述的内容应该可以工作......另外,您是否尝试过将其直接传递到图表中而不是使用 Highcharts.setOptions @NT3RP 我使用的是早期版本,这就是它无法正常工作的原因,设法将修订版更新到最新版本并且工作正常。可以在这里找到工作代码的小提琴link 【参考方案1】:

当然,如果您在堆栈中使用 moment,那么从头开始再次翻译所有这些字符串是没有意义的:

moment.locale('it-IT')
Highcharts.setOptions(
  lang: 
    months: moment.months(),
    weekdays: moment.weekdays(),
    shortMonths: moment.monthsShort(),
    ...
  
)

【讨论】:

你能给出一个完整的例子吗?还有更多……吗? 我当前的代码与显示的代码非常相似(它只有几个月、工作日、shortMonths)。 这不是特定于日期,但为了进一步帮助全球化您的 HighCharts,您可以使用this question 的答案中描述的技术设置语言选项“thousandsSep”和“decimalPoint”【参考方案2】:

在德语中(请注意,虽然 Highstocks 中的迷你按钮仍标记为“YTD”、“1y”和“All”):

Highcharts.setOptions(
                 lang: 
                     decimalPoint: ',',
                     thousandsSep: '.',
                     loading: 'Daten werden geladen...',
                     months: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
                     weekdays: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
                     shortMonths: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
                     exportButtonTitle: "Exportieren",
                     printButtonTitle: "Drucken",
                     rangeSelectorFrom: "Von",
                     rangeSelectorTo: "Bis",
                     rangeSelectorZoom: "Zeitraum",
                     downloadPNG: 'Download als PNG-Bild',
                     downloadJPEG: 'Download als JPEG-Bild',
                     downloadPDF: 'Download als PDF-Dokument',
                     downloadSVG: 'Download als SVG-Bild',
                     resetZoom: "Zoom zurücksetzen",
                     resetZoomTitle: "Zoom zurücksetzen"
                       
);

要更改范围选择器按钮,需要更多信息:

rangeSelector: 
              buttons: [
                  count: 1,
                  type: 'month',
                  text: '1M'
            , 
                  count: 5,
                  type: 'month',
                  text: '5M'
            , 
                  type: 'all',
                  text: 'Alles'
            ],
            inputEnabled: false,
            selected: 0
        ,

month/months -> Monat/Monate  ("M" is the correct abbreviation)
minute/minutes-> Minute/Minuten
millisecond/milliseconds-> Millisekunde/Millisekunden
year/years -> Jahr/Jahre
all -> Alles (everything) or Gesamt (the whole)   
ytd (year to date) -> seit Jahresbeginn (since the start of this year)

【讨论】:

【参考方案3】:

只是为了完成一点这个话题:

所有与语言相关的选项都可用here

完整的葡萄牙语示例:

var highchartsOptions = Highcharts.setOptions(
      lang: 
            loading: 'Aguarde...',
            months: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
            weekdays: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
            shortMonths: ['Jan', 'Feb', 'Mar', 'Abr', 'Maio', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
            exportButtonTitle: "Exportar",
            printButtonTitle: "Imprimir",
            rangeSelectorFrom: "De",
            rangeSelectorTo: "Até",
            rangeSelectorZoom: "Periodo",
            downloadPNG: 'Download imagem PNG',
            downloadJPEG: 'Download imagem JPEG',
            downloadPDF: 'Download documento PDF',
            downloadSVG: 'Download imagem SVG'
            // resetZoom: "Reset",
            // resetZoomTitle: "Reset,
            // thousandsSep: ".",
            // decimalPoint: ','
            
      
  );

【讨论】:

感谢您的贡献。 请注意,此处对 lang 选项的文档进行了更好的解释:api.highcharts.com/highcharts#lang PS: Salvaste-me a vida com esta resposta! “Feb”在葡萄牙语短月份名称中应为“Fev”:)【参考方案4】:

使用 shortMonths 属性:

Highcharts.setOptions(
    lang: 
    shortMonths: [__('Jan'), __('Feb'), __('Mar'), __('Apr'), __('May'), __('Jun'), 
                  __('Jul'), __('Aug'), __('Sep'), __('Oct'), __('Nov'), __('Dec')]                         ,
);

【讨论】:

【参考方案5】:

不要忘记将 dateTimeLabelFormats 设置为正确的格式; 例如:而不是month: '%b %y' --> month: '%B %y'(使用长月)

【讨论】:

【参考方案6】:

要本地化工作日,应在创建图表之前调用 Highcharts.setOptions 并包含新的工作日名称:

Highcharts.setOptions(
    lang: 
        weekdays: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi']
 );

请注意,该数组应以星期日的名称而不是星期一(工作周的第一天)开头。

Example on jsFiddle

【讨论】:

以上是关于Highcharts 日期时间本地化的主要内容,如果未能解决你的问题,请参考以下文章

如何在 x 轴上获取 highcharts 日期?

Highcharts 日期时间格式 y 轴间隔

Highcharts 日期刻度位置隐藏删除

DotNet.Highcharts:成本未针对正确日期绘制

Highcharts 复列范围图

x 轴上日期的滑块实现在 Highcharts 中无法正常工作