(转)数字格式化函数:Highcharts.numberFormat()
一、函数说明
该函数用于图表中数值的格式化,常见用途有数值精度控制、小数点符、千位符显示控制等。
二、函数使用
1、函数构造及参数
Highcharts.numberFormat (Number number, [Number decimals], [String decimalPoint], [String thousandsSep])
参数列表
返回值类型:String
2、举个栗子
对于数字 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 (不显示千分符)
三、操作实例
饼图的数据及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() 函数的作用了,下面说下关于该函数更多用处及数字格式化相关内容。
四、相关内容
1、需要用到数值格式化函数的地方
在图表中有很多地方也有可能需要用到数值格式化函数,归纳如下
![]()
2、用于数值格式化的其他方法
同样是格式化,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
|
(转)数字格式化函数:Highcharts.numberFormat()的更多相关文章
- 数字格式化函数:Highcharts.numberFormat()
(转)数字格式化函数:Highcharts.numberFormat() 一.函数说明 该函数用于图表中数值的格式化,常见用途有数值精度控制.小数点符.千位符显示控制等. 二.函数使用 1.函 ...
- 5个缺失的 JavaScript 数字格式化函数
/** 下面两个函数都能对浮点数进行四舍五入,保留小数点后两位 **/ function CurrencyFormatted(amount) { var i = parseFloat(amount); ...
- freemarker 数字格式化函数
${num?string('0.00')} 如果小数点后不足两位,用 0 代替 ${num?string('#.##')} 如果小数点后多余两位,就只保留两位,否则输出实际值 输出为:1239765. ...
- php课程 6-22 字符串格式化函数有哪些(精问)
php课程 6-22 字符串格式化函数有哪些(精问) 一.总结 一句话总结: 1.猜测一下$_GET()怎么来的? 函数赋值给变量的操作:$_YZM=get(); 这样就可以很好的解释哪些全局变量 ...
- php实现数字格式化,数字每三位加逗号的功能函数
原地址:http://www.jb51.net/article/73781.htm php实现数字格式化,数字每三位加逗号的功能函数,具体代码如下: ? 1 2 3 4 5 6 7 8 9 10 11 ...
- Java SE基础部分——常用类库之NumberFormat(数字格式化)
数字格式化常用方法:DecimalFormat和NuberFormat. //2016060524 数字格式化学习 //数字格式化 两种方法 一种直接使用NumberFormat,另一种Decimal ...
- 自定义编写js格式化数字的函数
在处理网页的时候,有时候会需要显示很长的数字,但是当数字的长度比较长的时候,就很难看一个数字到底是多大.这种情况下,一些网站在处理数字的时候,当数字的长度大于3个时,就用逗号把他们分开,这是一个比较常 ...
- JavaScript 系列--JavaScript一些奇淫技巧的实现方法(二)数字格式化 1234567890转1,234,567,890;argruments 对象(类数组)转换成数组
一.前言 之前写了一篇文章:JavaScript 系列--JavaScript一些奇淫技巧的实现方法(一)简短的sleep函数,获取时间戳 https://www.mwcxs.top/page/746 ...
- jquery EasyUI的formatter格式化函数代码
要格式化数据表格列,需要设置formatter属性,该属性是一个函数,它包含两个参数: value: 对应字段的当前列的值 record: 当前行的记录数据 复制代码 代码如下: $('#tt' ...
随机推荐
- android:shape
android:shape=["rectangle" | "oval" | "line" | "ring"] shape ...
- 【Leetcode】【Hard】Insert Interval
Given a set of non-overlapping intervals, insert a new interval into the intervals (merge if necessa ...
- 分布式数据库 HBase
原文地址:http://www.oschina.net/p/hbase/ HBase 概念 HBase – Hadoop Database,是一个高可靠性.高性能.面向列.可伸缩的分布式存储系统,利用 ...
- 团队作业—第二周—SRS
一.系统整体用例图: 二.用户用例图: 三.医院用例图:
- [公告]这里的博客将不再更新,最新博客请移步至blog.coderzh.com
公告:我的博客已迁移至独立博客:http://blog.coderzh.com/ 感谢大家支持!同时欢迎关注我的微信公众号:hacker-thinking <---- 扫描左侧二维码关注
- jQuery Ztree基本用法
1.首先在页面上有<ul/>标签 <ul id="tree" class="ztree"></ul> 2.定义ztree的配 ...
- 由于外键的存在引发的一个mysql问题 Cannot change column 'id': used in a foreign key constraint
Duplicate entry ' for key 'PRIMARY' 一查,发现表没有设置自增长. 尝试增加修改表,添加自增长. ALTER TABLE sh_incentive_item MODI ...
- 利用模拟退火提高Kmeans的聚类精度
http://www.cnblogs.com/LBSer/p/4605904.html Kmeans算法是一种非监督聚类算法,由于原理简单而在业界被广泛使用,一般在实践中遇到聚类问题往往会优先使用Km ...
- paip.2013年技术趋势以及热点 v3.0 cao
paip.2013年技术趋势以及热点 v3.0 cao 作者Attilax 艾龙, EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http://blog.cs ...
- Atitit.提升软件稳定性---基于数据库实现的持久化 循环队列 环形队列
Atitit.提升软件稳定性---基于数据库实现的持久化 循环队列 环形队列 1. 前言::选型(马) 1 2. 实现java.util.queue接口 1 3. 当前指针的2个实现方式 1 1.1 ...