Highcharts 图表中，如何设置标题字体及如何更改字体颜色

Posted 2023-04-16

需要详细代码，求助

参考技术A

代码如下：

  title: 
            usehtml: true,
            style: 
                color: '#FF00FF',      //字体颜色
                "fontSize": "34px",   //字体大小
                fontWeight: 'bold'
            
        ,

字体类设置，写在style下面

本回答被提问者采纳

Highcharts 日期时间本地化

【中文标题】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