Javascript Highcharts 日期时间本地化

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7419358/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 02:12:07  来源:igfitidea点击:

Highcharts DateTime Localization

javascriptjqueryhighchartslocalization

提问by chridam

Can someone point me to how I can localize the date-related Strings which are hardcoded in the HighCharts js-file. For instance, instead of the default 'Feb' date label in the x-axis, I would want the chart to display the localized value 'Fév'. I tried implementing the localization by setting the options on the language object before the chart is instantiated:

有人可以指出我如何本地化 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']
} });

but the chart still displays the default values.

但图表仍显示默认值。

jsFiddlewith the problem.

js摆弄这个问题。

回答by JMarques

Just to complete a little bit this topic:

只是为了完成这个主题:

All the options related with language are available here

所有与语言相关的选项都可以在这里找到

A full Portuguese example:

完整的葡萄牙语示例:

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: ','
            }
      }
  );

回答by Dmitrii Malyshev

Complete russian localization (русская локализация).

完整的俄语本地化 (русская локализация)。

Highcharts.setOptions({
            lang: {
                loading: 'Загрузка...',
                months: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
                weekdays: ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'],
                shortMonths: ['Янв', 'Фев', 'Март', 'Апр', 'Май', 'Июнь', 'Июль', 'Авг', 'Сент', 'Окт', 'Нояб', 'Дек'],
                exportButtonTitle: "Экспорт",
                printButtonTitle: "Печать",
                rangeSelectorFrom: "С",
                rangeSelectorTo: "По",
                rangeSelectorZoom: "Период",
                downloadPNG: 'Скачать PNG',
                downloadJPEG: 'Скачать JPEG',
                downloadPDF: 'Скачать PDF',
                downloadSVG: 'Скачать SVG',
                printChart: 'Напечатать график'
            }
    });

回答by Baldiry

En espa?ol:

En espa?ol:

Highcharts.setOptions({
    lang: {
        loading: 'Cargando...',
        months: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
        weekdays: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
        shortMonths: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
        exportButtonTitle: "Exportar",
        printButtonTitle: "Importar",
        rangeSelectorFrom: "Desde",
        rangeSelectorTo: "Hasta",
        rangeSelectorZoom: "Período",
        downloadPNG: 'Descargar imagen PNG',
        downloadJPEG: 'Descargar imagen JPEG',
        downloadPDF: 'Descargar imagen PDF',
        downloadSVG: 'Descargar imagen SVG',
        printChart: 'Imprimir',
        resetZoom: 'Reiniciar zoom',
        resetZoomTitle: 'Reiniciar zoom',
        thousandsSep: ",",
        decimalPoint: '.'
    }
});

回答by jank

And in German (note though that the mini-buttons in Highstocks are still labeled "YTD","1y", and "All") :

在德语中(请注意,尽管 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"
                       }
});

To change the range selector buttons, some more information is needed:

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

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)

回答by eolsson

To localize weekdays, Highcharts.setOptionsshould be called before chart creation and contain the new weekday names:

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

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

Note that the array should start with the name for Sunday not Monday (the first day of the work week).

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

Example on jsFiddle

jsFiddle 示例

enter image description here

在此处输入图片说明

回答by Fritzz

For the Dutch language (Nederlands)

对于荷兰语(荷兰)

var highchartsOptions = Highcharts.setOptions({
  lang: {
    loading: 'Wordt geladen...',
    months: ['januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli', 'augustus', 'september', 'oktober', 'november', 'december'],
    weekdays: ['zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag'],
    shortMonths: ['jan', 'feb', 'maa', 'apr', 'mei', 'jun', 'jul', 'aug', 'sep', 'okt', 'nov', 'dec'],
    exportButtonTitle: "Exporteren",
    printButtonTitle: "Printen",
    rangeSelectorFrom: "Vanaf",
    rangeSelectorTo: "Tot",
    rangeSelectorZoom: "Periode",
    downloadPNG: 'Download als PNG',
    downloadJPEG: 'Download als JPEG',
    downloadPDF: 'Download als PDF',
    downloadSVG: 'Download als SVG',
    resetZoom: 'Reset',
    resetZoomTitle: 'Reset',
    thousandsSep: '.',
    decimalPoint: ','
    }
  }
);

回答by TGO

In French:

法语:

Highcharts.setOptions({
        lang: {
                loading: 'Chargement...',
                months: ['janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'ao?t', 'septembre', 'octobre', 'novembre', 'décembre'],
                weekdays: ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
                shortMonths: ['jan', 'fév', 'mar', 'avr', 'mai', 'juin', 'juil', 'ao?', 'sep', 'oct', 'nov', 'déc'],
                exportButtonTitle: "Exporter",
                printButtonTitle: "Imprimer",
                rangeSelectorFrom: "Du",
                rangeSelectorTo: "au",
                rangeSelectorZoom: "Période",
                downloadPNG: 'Télécharger en PNG',
                downloadJPEG: 'Télécharger en JPEG',
                downloadPDF: 'Télécharger en PDF',
                downloadSVG: 'Télécharger en SVG',
                resetZoom: "Réinitialiser le zoom",
                resetZoomTitle: "Réinitialiser le zoom",
                thousandsSep: " ",
                decimalPoint: ','
        }
});

回答by retomi

In italiano

在意大利语

var highchartsOptions = Highcharts.setOptions({
lang: 
    {
    loading: 'Sto caricando...',
    months: ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre'],
    weekdays: ['Domenica', 'Lunedì', 'Martedì', 'Mercoledì', 'Giovedì', 'Venerdì', 'Sabato'],
    shortMonths: ['Gen', 'Feb', 'Mar', 'Apr', 'Mag', 'Giu', 'Lugl', 'Ago', 'Set', 'Ott', 'Nov', 'Dic'],
    exportButtonTitle: "Esporta",
    printButtonTitle: "Importa",
    rangeSelectorFrom: "Da",
    rangeSelectorTo: "A",
    rangeSelectorZoom: "Periodo",
    downloadPNG: 'Download immagine PNG',
    downloadJPEG: 'Download immagine JPEG',
    downloadPDF: 'Download documento PDF',
    downloadSVG: 'Download immagine SVG',
    printChart: 'Stampa grafico',
    thousandsSep: ".",
    decimalPoint: ','
    }
});

回答by Arlong

For Turkish (Türk?e olarak):

对于土耳其语 (Türk?e olarak):

var highchartsOptions = Highcharts.setOptions({
  lang: {
        loading: 'Yükleniyor...',
        months: ['Ocak', '?ubat', 'Mart', 'Nisan', 'May?s', 'Haziran',  'Temmuz', 'A?ustos', 'Eylül', 'Ekim', 'Kas?m', 'Aral?k'],
        weekdays: ['Pazar', 'Pazartesi', 'Sal?', '?ar?amba', 'Per?embe', 'Cuma', 'Cumartesi'],
        shortMonths: ['Ocak', '?ubat', 'Mart', 'Nisan', 'May?s', 'Haziran',  'Temmuz', 'A?ustos', 'Eylül', 'Ekim', 'Kas?m', 'Aral?k'],
        exportButtonTitle: "D??ar? Aktar",
        printButtonTitle: "Yazd?r",
        rangeSelectorFrom: "Ba?lang??",
        rangeSelectorTo: "Biti?",
        rangeSelectorZoom: "Periyot",
        downloadPNG: 'PNG Olarak indir',
        downloadJPEG: 'JPEG olarak indir',
        downloadPDF: 'PDF olarak indir',
        downloadSVG: 'SVG olarak indir',
        resetZoom: ['Yak?nla?may? S?f?rla'],
        resetZoomTitle:['Yak?nla?may? S?f?rla'],
        printChart:['Yazd?r']
        // thousandsSep: ".",
        // decimalPoint: ','
        }
});

回答by Marcin Waligora

For Polish:

波兰语:

Highcharts.setOptions({
        lang: {
            loading: '?adowanie...',
            months: ['Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec', 'Lipiec', 'Sierpień', 'Wrzesień', 'Pa?dziernik', 'Listopad', 'Grudzień'],
            weekdays: ['Niedziela', 'Poniedzia?ek', 'Wtorek', '?roda', 'Czwartek', 'Pi?tek', 'Sobota'],
            shortMonths: ['Sty', 'Lut', 'Mar', 'Kwi', 'Maj', 'Cze', 'Lip', 'Sie', 'Wrz', 'Pa?','Lis', 'Gru'],
            exportButtonTitle: "Export",
            printButtonTitle: "Drukowanie",
            rangeSelectorFrom: "Od",
            rangeSelectorTo: "Do",
            rangeSelectorZoom: "Przybli?enie",
            downloadPNG: 'Pobierz obraz PNG',
            downloadJPEG: 'Pobierz obraz JPEG',
            downloadPDF: 'Pobierz dokument PDF',
            downloadSVG: 'Pobierz obraz SVG',
            thousandsSep: " ",  
            decimalPoint: ','  
            // resetZoom: "Reset",
            // resetZoomTitle: "Reset,
        }
    }