數字格式化函數：Highcharts.numberFormat()

(轉)數字格式化函數：Highcharts.numberFormat()

1、函數說明

該函數用於圖表中數值的格式化，常見用途有數值精度控制、小數點符、千位符顯示控制等。

 

2、函數使用

 

一、函數構造及參數

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

 

        參數列表

• number   須要格式化的數字
• decimals  小數保留位數，最後一位是四捨五入，默認爲 0（可選參數）
• decimalPoint   小數點符，默認是「.」（可選參數）
• thousandsSep 千位符，默認是「,」 （可選參數）

返回值類型：String

 

詳見API 文檔 ： http://www.hcharts.cn/api/index.php#Highcharts.numberFormat

 

  二、舉個栗子

對於數字 12223.8723

Highcharts.numberFormat(12223.87)   = 12,224      （默認精度是0）

Highcharts.numberFormat(12223.87, 2)   = 12223.87   （保留兩位小數）

Highcharts.numberFormat(12223.87, 2, ",", " ")   = 12 223,87   （小數點用「,」，千分符用「 」）

Highcharts.numberFormat(12223.87, 2, ".", "")    = 12223.87    （不顯示千分符）

 

3、操做實例

餅圖的數據及dataLabels 的格式化函數以下

plotOptions: {

pie: {

    dataLabels: {

        enabled: true,

formatter: function() { 

    return  this.point.name + this.percentage + '%';

}

    }

}

    },    

    series: [{ 

  type: 'pie', 

name: 'Browser share', 

data: [ 

    ['Firefox', 45.60], 

    ['IE', 26.68],

    { 

name: 'Chrome',

y: 12.68, 

sliced: true, 

selected: true 

    },

    ['Safari', 8.65], 

    ['Opera', 6.62], 

    ['Others', 0.67]

]

    }]

 

這時候咱們看到的餅圖文字標籤（dataLabels）爲

 

圖中的數字（dataLabels中的餅圖扇區所佔百分比）就會顯示出沒有通過精度控制的內容，利用Highcharts.numberFormat() 咱們就能夠控制該數值的精度。

formatter: function() { 

return this.point.name + Highcharts.numberFormat(this.percentage,2) + '%';

   }

   

至此已基本說清楚 Highcharts.numberFormat() 函數的做用了，下面說下關於該函數更多用處及數字格式化相關內容。

 

4、相關內容

 

一、須要用到數值格式化函數的地方

在圖表中有不少地方也有可能須要用到數值格式化函數，概括以下

 

 

• 座標軸文字（Axis.labels）：對應的格式化函數是 xAxis.labels.formatter、yAxis.labels.formatter
• 數據提示框（tooltip）：對應的格式化函數是 tooltip.formatter
• 數據點文字（dataLabels）：plotOptions.series.dataLabels.formatter 及  plotOptions.{chartType}.dataLabels.formatter

二、用於數值格式化的其餘方法

       一樣是格式化，Highcharts還提供了更簡便的方法，也就是 format 字符串 ，例如與 plotOptions.series.dataLabels.formatter 對應的就是 plotOptions.pie.dataLabels.format

 

     

    示例代碼

     plotOptions: {

     pie: {

        dataLabels: {

    enabled: true,

            formatter: function() { 

                return  this.point.name + this.percentage + '%';

            },

            // 對應的format

            format:"{point.name} + {percentage}";

}

     }

 },    

  也就是 formatter 是函數，format 是格式字符串，關於二者的區別及優勢這裏就很少說，咱們來講說format是如何進行數值精度控制的。

   formatter: function() { 

    return this.point.name + Highcharts.numberFormat(this.percentage,2) + '%';

 }

 format:"{point.name} {this.percentage:.2f}"

  {this.percentage:.2f} 即 {數值:.精度f}

 

 

轉自：http://bbs.hcharts.cn/article-54-1.html