生活随笔
收集整理的這篇文章主要介紹了
(转)数字格式化函数:Highcharts.numberFormat()
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
一、函數(shù)說(shuō)明
該函數(shù)用于圖表中數(shù)值的格式化,常見(jiàn)用途有數(shù)值精度控制、小數(shù)點(diǎn)符、千位符顯示控制等。 二、函數(shù)使用 1、函數(shù)構(gòu)造及參數(shù) Highcharts.numberFormat?(Number number, [Number decimals], [String decimalPoint], [String thousandsSep]) 參數(shù)列表
- number ? 需要格式化的數(shù)字
- decimals? 小數(shù)保留位數(shù),最后一位是四舍五入,默認(rèn)為 0(可選參數(shù))
- decimalPoint ? 小數(shù)點(diǎn)符,默認(rèn)是“.”(可選參數(shù))
- thousandsSep 千位符,默認(rèn)是“,” (可選參數(shù))
返回值類型:String 詳見(jiàn)API 文檔 :?http://www.hcharts.cn/api/index.php#Highcharts.numberFormat 2、舉個(gè)栗子 對(duì)于數(shù)字 12223.8723 Highcharts.numberFormat(12223.87) ? =?12,224? ? ? (默認(rèn)精度是0) Highcharts.numberFormat(12223.87, 2) ? =?12223.87 ? (保留兩位小數(shù)) Highcharts.numberFormat(12223.87, 2, ",", " ") ? =?12 223,87 ? (小數(shù)點(diǎn)用“,”,千分符用“ ”) Highcharts.numberFormat(12223.87, 2, ".", "") ?? =?12223.87 ?? (不顯示千分符) 三、操作實(shí)例 餅圖的數(shù)據(jù)及dataLabels 的格式化函數(shù)如下 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] ] }]
這時(shí)候我們看到的餅圖文字標(biāo)簽(dataLabels)為 圖中的數(shù)字(dataLabels中的餅圖扇區(qū)所占百分比)就會(huì)顯示出沒(méi)有經(jīng)過(guò)精度控制的內(nèi)容,利用Highcharts.numberFormat() 我們就可以控制該數(shù)值的精度。 formatter: function() {? return this.point.name?+ Highcharts.numberFormat(this.percentage,2) + '%'; }
至此已基本說(shuō)清楚 Highcharts.numberFormat() 函數(shù)的作用了,下面說(shuō)下關(guān)于該函數(shù)更多用處及數(shù)字格式化相關(guān)內(nèi)容。 四、相關(guān)內(nèi)容 1、需要用到數(shù)值格式化函數(shù)的地方 在圖表中有很多地方也有可能需要用到數(shù)值格式化函數(shù),歸納如下 - 坐標(biāo)軸文字(Axis.labels):對(duì)應(yīng)的格式化函數(shù)是?xAxis.labels.formatter、yAxis.labels.formatter
- 數(shù)據(jù)提示框(tooltip):對(duì)應(yīng)的格式化函數(shù)是?tooltip.formatter
- 數(shù)據(jù)點(diǎn)文字(dataLabels):plotOptions.series.dataLabels.formatter?及 ?plotOptions.{chartType}.dataLabels.formatter
2、用于數(shù)值格式化的其他方法 同樣是格式化,Highcharts還提供了更簡(jiǎn)便的方法,也就是 format 字符串
,例如與?plotOptions.series.dataLabels.formatter?對(duì)應(yīng)的就是?plotOptions.pie.dataLabels.format 示例代碼 plotOptions: { pie: { dataLabels: {
? ??enabled: true, formatter: function() {? return ?this.point.name
?+ this.percentage + '%'; }, // 對(duì)應(yīng)的format format:"{point.name} + {percentage}";
} } },? ?? 也就是 formatter 是函數(shù),format 是格式字符串,關(guān)于兩者的區(qū)別及優(yōu)點(diǎn)這里就不多說(shuō),我們來(lái)說(shuō)說(shuō)format是如何進(jìn)行數(shù)值精度控制的。 formatter: function() {? return this.point.name
?+ Highcharts.numberFormat(this.percentage,2) + '%'; } format:"{point.name} {this.percentage:.2f}" {this.percentage:.2f}?即 {數(shù)值:.精度f(wàn)} 轉(zhuǎn)自:http://bbs.hcharts.cn/article-54-1.html
轉(zhuǎn)載于:https://www.cnblogs.com/Dyyuan/p/4948394.html
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯,堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)
總結(jié)
以上是生活随笔為你收集整理的(转)数字格式化函数:Highcharts.numberFormat()的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò),歡迎將生活随笔推薦給好友。