十六、基礎教程-語言文字(lang)

圖表中的文字及語言相關的內容都是可以自定義及本地化的,下面詳細說明。

一、語言及文字

Highcharts 中的文字可以通過 Highcharts.setOptions.lang 來設定,lang 屬於全局配置,對當前頁面的所有圖表有效,對應的漢化後的配置是:
// 全局配置,對當前頁面的所有圖表有效

Highcharts.setOptions({
    lang:{
       contextButtonTitle:"圖表導出菜單",
       decimalPoint:".",
       downloadJPEG:"下載JPEG圖片",
       downloadPDF:"下載PDF文件",
       downloadPNG:"下載PNG文件",
       downloadSVG:"下載SVG文件",
       drillUpText:"返回 {series.name}",
       loading:"加載中",
       months:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
       noData:"沒有數據",
       numericSymbols: [ "千" , "兆" , "G" , "T" , "P" , "E"],
       printChart:"打印圖表",
       resetZoom:"恢復縮放",
       resetZoomTitle:"恢復圖表",
       shortMonths: [ "Jan" , "Feb" , "Mar" , "Apr" , "May" , "Jun" , "Jul" , "Aug" , "Sep" , "Oct" , "Nov" , "Dec"],
       thousandsSep:",",
       weekdays: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六","星期天"]
    }
}); 

二、時間及時區

1、時間格式化

Highcharts 不同位置的時間顯示可以通過對應時間格式化函數、Highcharts.dateFormate 來處理,例如處理數據提示框中的時間顯示可以通過下面的方法實現:
tooltip: {
    dateTimeLabelFormats: {
        year:"%Y",
        second:"%Y-%m-%d %H:%M:%S",
        // ...
    },
    // 還可以在 格式化函數中通過調用  Highcharts.dateFormate() 函數來處理,總之是非常靈活的
}
對於 x軸的時間格式化可以通過下面的方式實現:
xAxis: {
    dateTimeLabelFormats: {
        year: '%Y',
        month: '%Y-%m',
        dat: '%Y-%m-%d',
        // ...
        // 當然還可以通過xAxis.labels.formatter 函數來格式化
    }
}

2、時區

通過 global.timezoneOffset 可以設置時區,中國屬於 +8 區,所以有的時候圖表中顯示的時間和實際時間相差 8 個小時,這時候我們可以通過設置時區來修正,配置代碼如下:
Highcharts.setOptions({
    global: {
        timezoneOffset: -8 * 60  // +8 時區修正方法
    }
}) 

三、符號

圖表中數值顯示時往往帶有格式化符號,這裏統一說明如下:

1、小數點、千分號、公制前綴

Highcharts.setOptions({
  lang: {
    decimalPoint: '.', // 小數點號,例如 12.50
    thousandsSep: ',' // 千分號,例如 12,000
    numericSymbols: 'k,M,G,T,P,E' // 公制前綴,通過設置爲 null 不顯示 12k,1.2M 這種形式
  }
})

2、數值格式化函數

通過 Highcharts.numberFormat 可以對圖表中的數值進行格式化,函數說明如下
Highcharts.numberFormat (Number number, [Number decimals], [String decimalPoint], [String thousandsSep])
number 需要格式化的數值
decimals 精度,保留位置,可選參數,默認是 0
decimalPoint 小數符號,可選參數,默認是 global.decimalPoint
thousandsSep 千分符,可選參數,默認是 global.numericSymbols
發佈了120 篇原創文章 · 獲贊 5 · 訪問量 5萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章