图表中的文字及语言相关的内容都是可以自定义及本地化的,下面详细说明。

      一、语言及文字

      Highcharts 中的文字可以通过 Highcharts.setOptions.lang 来设定,lang 属于全局配置,对当前页面的所有图表有效,对应的汉化后的配置是:

      1. // 全局配置,对当前页面的所有图表有效
      2. Highcharts.setOptions({
      3. lang:{
      4. contextButtonTitle:"图表导出菜单",
      5. decimalPoint:".",
      6. downloadJPEG:"下载JPEG图片",
      7. downloadPDF:"下载PDF文件",
      8. downloadPNG:"下载PNG文件",
      9. downloadSVG:"下载SVG文件",
      10. drillUpText:"返回 {series.name}",
      11. loading:"加载中",
      12. months:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
      13. noData:"没有数据",
      14. numericSymbols: [ "千" , "兆" , "G" , "T" , "P" , "E"],
      15. printChart:"打印图表",
      16. resetZoom:"恢复缩放",
      17. resetZoomTitle:"恢复图表",
      18. shortMonths: [ "Jan" , "Feb" , "Mar" , "Apr" , "May" , "Jun" , "Jul" , "Aug" , "Sep" , "Oct" , "Nov" , "Dec"],
      19. thousandsSep:",",
      20. weekdays: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六","星期天"]
      21. }
      22. });

      在线试一试

      二、时间及时区

      1、时间格式化

      Highcharts 不同位置的时间显示可以通过对应时间格式化函数 Highcharts.dateFormat 来处理,例如处理数据提示框中的时间显示可以通过下面的方法实现:

      1. tooltip: {
      2. dateTimeLabelFormats: {
      3. year:"%Y",
      4. second:"%Y-%m-%d %H:%M:%S",
      5. // ...
      6. },
      7. // 还可以在 格式化函数中通过调用 Highcharts.dateFormat() 函数来处理,总之是非常灵活的
      8. }

      对于 x轴的时间格式化可以通过下面的方式实现:

      1. xAxis: {
      2. dateTimeLabelFormats: {
      3. year: '%Y',
      4. month: '%Y-%m',
      5. dat: '%Y-%m-%d',
      6. // ...
      7. // 当然还可以通过xAxis.labels.formatter 函数来格式化
      8. }
      9. }

      在线试一试

      对于其它地方需要进行日期格式化这里不再累述。

      2、时区

      通过 global.timezoneOffset 可以设置时区,中国属于 +8 区,所以有的时候图表中显示的时间和实际时间相差 8 个小时,这时候我们可以通过设置时区来修正,配置代码如下:

      1. Highcharts.setOptions({
      2. global: {
      3. timezoneOffset: -8 * 60 // +8 时区修正方法
      4. }
      5. })

      三、符号

      图表中数值显示时往往带有格式化符号,这里统一说明如下:

      1、小数点、千分号、公制前缀

      1. Highcharts.setOptions({
      2. lang: {
      3. decimalPoint: ‘.’, // 小数点号,例如 12.50
      4. thousandsSep: ‘,’ // 千分号,例如 12,000
      5. numericSymbols: ‘k,M,G,T,P,E’ // 公制前缀,通过设置为 null 不显示 12k,1.2M 这种形式
      6. }
      7. })

      2、数值格式化函数

      通过 Highcharts.numberFormat 可以对图表中的数值进行格式化,函数说明如下

      函数构造

      1. Highcharts.numberFormat (Number number, [Number decimals], [String decimalPoint], [String thousandsSep])

      参数说明:

      • number 需要格式化的数值
      • decimals 精度,保留位置,可选参数,默认是 0
      • decimalPoint 小数符号,可选参数,默认是 global.decimalPoint
      • thousandsSep 千分符,可选参数,默认是 global.numericSymbols
        点击查看详情

      原文: https://www.hcharts.cn/docs/basic-lang