web-dev-qa-db-ja.com

Highcharts DateTimeローカリゼーション

誰かが私にHighCharts jsファイルにハードコードされている日付関連の文字列をローカライズする方法を教えてくれますか？たとえば、x軸のデフォルトの「Feb」日付ラベルの代わりに、チャートにローカライズされた値「Fév」を表示する必要があります。チャートがインスタンス化される前に言語オブジェクトにオプションを設定して、ローカライズを実装しようとしました。

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 問題があります。

javascriptjqueryhighchartslocalization
44
chridam

このトピックについて少しだけ説明します。

言語に関連するすべてのオプションが利用可能です 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: ','
            }
      }
  );
49
JMarques

ロシア語の完全なローカライズ（русскаялокализация）。

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

スペイン語：

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: '.'
    }
});
18
Baldiry

そしてドイツ語（ただし、Highstocksのミニボタンには「YTD」、「1y」、および「すべて」のラベルが付いています）：

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)
14
jank

平日をローカライズするには、Highcharts.setOptionsは、チャートを作成する前に呼び出して、新しい曜日名を含める必要があります。

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

配列は、月曜日（週の最初の日）ではなく日曜日の名前で始まることに注意してください。

jsFiddleの例

enter image description here

13
eolsson

オランダ語（オランダ）の場合

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

フランス語で：

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

イタリア語で

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

トルコ語（Türkçeolarak）の場合：

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

ポーランド語の場合：

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,
        }
    }
6
Marcin Waligora

ShortMonthsプロパティを使用します。

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

ハンガリー語（magyar）：

lang: {
    loading: 'Betöltés...',
    months: ['január', 'február', 'március', 'április', 'május','június',
        'július', 'augusztus', 'szeptember', 'október', 'november', 'december'],
    shortMonths:  ['jan', 'febr', 'márc', 'ápr', 'máj', 'jún', 'júl', 'aug', 'szept', 'okt', 'nov', 'dec'],
    weekdays: ['vasámap', 'hétfő', 'kedd', 'szerda', 'csütörtök', 'péntek', 'szombat'],                     
    exportButtonTitle: "Exportál",
    printButtonTitle: "Importál",
    rangeSelectorFrom: "ettől",
    rangeSelectorTo: "eddig",
    rangeSelectorZoom: "mutat:",
    downloadPNG: 'Letöltés PNG képként',
    downloadJPEG: 'Letöltés JPEG képként',
    downloadPDF: 'Letöltés PDF dokumentumként',
    downloadSVG: 'Letöltés SVG formátumban',
    resetZoom: "Visszaállít",
    resetZoomTitle: "Visszaállít",
    thousandsSep: "",
    decimalPoint: ','
},
rangeSelector: {
      buttons: [
        { count: 1, type: 'month', text: '1 hó'}, 
        { count: 3, type: 'month', text: '3 hó'},
        { count: 6, type: 'month', text: '6 hó'},
        { count: 1, type: 'year' , text: '1 év'},
        { type: 'all', text: 'mind'}
    ],
    inputEnabled: false,
    selected: 0
},

すべてに注意：平日は日曜日から始まります！

4
user669677

もちろん、スタックでモーメントを使用している場合、これらすべての文字列をゼロから再び翻訳することは無意味です：

moment.locale('it-IT')
Highcharts.setOptions({
  lang: {
    months: moment.months(),
    weekdays: moment.weekdays(),
    shortMonths: moment.monthsShort(),
    ...
  }
})
4
Francesco Meli

チェコ語翻訳

var highchartsOptions = Highcharts.setOptions({
        lang: {
            loading: 'Načítám...',
            months: ['Leden', 'Únor', 'Březen', 'Duben', 'Květen', 'Červen', 'Červenec', 'Srpen', 'Září', 'Říjen', 'Listopad', 'Prosinec'],
            weekdays: ['Neděle', 'Pondělí', 'Úterý', 'Středa', 'Čtvrtek', 'Pátek', 'Sobota'],
            shortMonths: ['Led', 'Úno', 'Bře', 'Dub', 'Kvě', 'Čvn', 'Čvc', 'Srp', 'Zář', 'Říj', 'Lis', 'Pro'],
            exportButtonTitle: "Export",
            printButtonTitle: "Tisk",
            rangeSelectorFrom: "Od",
            rangeSelectorTo: "Do",
            rangeSelectorZoom: "Období",
            downloadPNG: 'Stáhnout obrázek PNG',
            downloadJPEG: 'Stáhnout obrázek JPEG',
            downloadPDF: 'Stáhnout dokument PDF',
            downloadSVG: 'Stáhnout obrázek SVG',
            printChart: 'Vytisknout graf',
            resetZoom: "Zrušit výběr",
            resetZoomTitle: "Zrušit výběr",
            thousandsSep: "",
            decimalPoint: '.'
        }
    }
);
4
rerich

DateTimeLabelFormatsを正しい形式に設定することを忘れないでください。例：month: '%b %y'の代わりに-> month: '%B %y'（長い月を使用）

4
Ming Tsai

中国語で

var highchartsOptions = Highcharts.setOptions({
    lang: {
        loading: '加载中...',
        months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月', '9月', '10月', '11月', '12月'],
        shortMonths: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月', '9月', '10月', '11月', '12月'],
        weekdays: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
        exportButtonTitle: '导出',
        printButtonTitle: '打印',
        rangeSelectorFrom: '从',
        rangeSelectorTo: '到',
        rangeSelectorZoom: "缩放",
        downloadPNG: '下载PNG格式',
        downloadJPEG: '下载JPEG格式',
        downloadPDF: '下载PDF格式',
        downloadSVG: '下载SVG格式'
    }
}
4
xuesong

カタロニア語（ github repo アップデートを確認）

Highcharts.setOptions({
    lang: {
        contextButtonTitle: "Menú contextual del diagrama",
        decimalPoint: ",",
        downloadJPEG: "Desa com a imatge JPEG",
        downloadPDF: "Desa com a document PDF",
        downloadPNG: "Desa com a imatge PNG",
        downloadSVG: "Desa com a imatge SVG",
        drillUpText: "Torna a {series.name}",
        loading: "S'està carregant...",
        months: ["Gener", "Febrer", "Març", "Abril", "Maig", "Juny", "Juliol", "Agost", "Setembre", "Octubre", "Novembre", "Desembre"],
        noData: "No hi ha dades per mostrar",
        printChart: "Imprimeix el diagrama",
        resetZoom: "Restableix el zoom",
        resetZoomTitle: "Restableix el nivell de zoom 1:1",
        shortMonths: ["Gen", "Feb", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Oct", "Nov", "Des"],
        thousandsSep: ".",
        weekdays: ["Diumenge", "Dilluns", "Dimarts", "Dimecres", "Dijous", "Divendres", "Dissabte"]
    }
});
3
aaguilera

Highchartのロシア語翻訳

Highchart用のРусскийперевод

Highcharts.setOptions({
        lang: {
            months: ['Январь', 'Февраль', 'Март', 'Апрель',
                'Май', 'Июнь', 'Июль', 'Август',
                'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
            weekdays: ['Воскресенье', 'Понедельник', 'Вторник',
                'Среда', 'Четверг', 'Пятница', 'Суббота'],
            shortMonths: ['Январь', 'Февраль', 'Март', 'Апрель',
                'Май', 'Июнь', 'Июль', 'Август',
                'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь']
        }
    });
3
mosvov

ノルウェー語、ブークモール（最も使用されている書面による標準）の翻訳：

Highcharts.setOptions({
    lang: {
        contextButtonTitle: "Diagram kontekstmeny"
        decimalPoint: ","
        downloadJPEG: "Last ned JPEG bilde"
        downloadPDF: "Last ned PDF dokument"
        downloadPNG: "Last ned PNG bilde"
        downloadSVG: "Last ned SVG vektorbilde"
        drillUpText: "Tilbake til {series.name}"
        invalidDate:
        loading: "Laster..."
        months: [ "Januar" , "Februar" , "Mars" , "April" , "Mai" , "Juni" , "Juli" , "August" , "September" , "Oktober" , "November" , "Desember"]
        noData: "Ingen data å vise"
        numericSymbols: [ "k" , "M" , "G" , "T" , "P" , "E"]
        printChart: "Skriv ut diagram"
        resetZoom: "Nullstill zoom"
        resetZoomTitle: "Nullstill zoomnivå 1:1"
        shortMonths: [ "Jan" , "Feb" , "Mar" , "Apr" , "Mai" , "Jun" , "Jul" , "Aug" , "Sep" , "Okt" , "Nov" , "Des"]
        shortWeekdays: undefined
        thousandsSep: " "
        weekdays: ["Søndag", "Mandag", "Tirsdag", "Onsdag", "Torsdag", "Fredag", "Lørdag"]
    }
});

ノルウェー語、ニーノシュクの翻訳：

Highcharts.setOptions({
    lang: {
        contextButtonTitle: "Diagram kontekstmeny"
        decimalPoint: ","
        downloadJPEG: "Last ned JPEG bilete"
        downloadPDF: "Last ned PDF dokument"
        downloadPNG: "Last ned PNG bilete"
        downloadSVG: "Last ned SVG vektorbilete"
        drillUpText: "Tilbake til {series.name}"
        invalidDate:
        loading: "Lastar..."
        months: [ "Januar" , "Februar" , "Mars" , "April" , "Mai" , "Juni" , "Juli" , "August" , "September" , "Oktober" , "November" , "Desember"]
        noData: "Ingen data å vise"
        numericSymbols: [ "k" , "M" , "G" , "T" , "P" , "E"]
        printChart: "Skriv ut diagram"
        resetZoom: "Nullstill zoom"
        resetZoomTitle: "Nullstill zoomnivå 1:1"
        shortMonths: [ "Jan" , "Feb" , "Mar" , "Apr" , "Mai" , "Jun" , "Jul" , "Aug" , "Sep" , "Okt" , "Nov" , "Des"]
        shortWeekdays: undefined
        thousandsSep: " "
        weekdays: ["Søndag", "Måndag", "Tysdag", "Onsdag", "Torsdag", "Fredag", "Laurdag"]
    }
});
2
Halvor Holsten Strand

スロバキア語翻訳

var highchartsOptions = Highcharts.setOptions({
        lang: {
            loading: 'Načítavam...',
            months: ['Január', 'Február', 'Marec', 'Apríl', 'Máj', 'Jún', 'Júl', 'August', 'September', 'Október', 'November', 'December'],
            weekdays: ['Nedeľa', 'Pondelok', 'Utorok', 'Streda', 'Štvrtok', 'Piatok', 'Sobota'],
            shortMonths: ['Jan', 'Feb', 'Mar', 'Apr', 'Máj', 'Jún', 'Júl', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec'],
            exportButtonTitle: "Export",
            printButtonTitle: "Tlač",
            rangeSelectorFrom: "Od",
            rangeSelectorTo: "Do",
            rangeSelectorZoom: "Obdobie",
            downloadPNG: 'Stiahnuť obrázok PNG',
            downloadJPEG: 'Stiahnuť obrázok JPEG',
            downloadPDF: 'Stiahnuť dokument PDF',
            downloadSVG: 'Stiahnuť obrázok SVG',
            printChart: 'Vytlačiť graf',
            resetZoom: "Zrušiť výber",
            resetZoomTitle: "Zrušiť výber",
            thousandsSep: "",
            decimalPoint: '.'
        }
    }
);
2
dgregor