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 日期时间本地化的主要内容,如果未能解决你的问题,请参考以下文章