(转)数字格式化函数:Highcharts.numberFormat()

一、函数说明

该函数用于图表中数值的格式化,常见用途有数值精度控制、小数点符、千位符显示控制等。
二、函数使用
1、函数构造及参数
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
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、需要用到数值格式化函数的地方
在图表中有很多地方也有可能需要用到数值格式化函数,归纳如下
  • 坐标轴文字(Axis.labels):对应的格式化函数是 xAxis.labels.formatter、yAxis.labels.formatter
  • 数据提示框(tooltip):对应的格式化函数是 tooltip.formatter
  • 数据点文字(dataLabels):plotOptions.series.dataLabels.formatter 及  plotOptions.{chartType}.dataLabels.formatter
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

转载于:https://www.cnblogs.com/Dyyuan/p/4948394.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/574197.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

usb3.0 ssd 测试软件,SSD打造的移动硬盘,顺便测下USB2.0、USB3.0、SATA2.0、SATA3.0传输速度...

本帖最后由 神经病的春天 于 2014-9-18 15:36 编辑近来升级了一下主机,这样一来,终于能够拥有USB3.0和SATA3.0接口了,不过本人目前还木有SSD,所以尚无法完全发挥出这些接口的速度优势。 为了测试,上周的时候&#xff0…

cad图层管理插件_设计大神CAD常用七个插件你会用几个?

如果你需要这些CAD插件,可以私信我,小编会及时发给大家​​ 说道CAD插件可能会被人们熟知的也就那几个,可是据统计CAD插件多达上百个,那么在这上百个插件中你又会用几个呢?下面就让我们看看大部分设计师常用的插件有哪…

笔记本显示器仅计算机,别只玩性能 笔记本屏幕怎么进化才靠谱?

1分辨率升级2K不合适一直以来,屏幕显示效果都是笔记本电脑的弱项。近几年笔记本电脑的变化更多是性能以及外观设计的变迁。诸如游戏本以及超极本等产品,在屏幕的优化上,表现都是差强人意。很多人手中的笔记本都是TN屏幕的产品,在显…

PHP - 图像处理

第14章 处理图像 学习要点: 1.创建图像 2.简单小案例 在PHP5中,动态图象的处理要比以前容易得多。PHP5在php.ini文件中包含了GD扩展包,只需去掉GD扩展包的相应注释就可以正常使用了。PHP5包含的GD库正是升级的GD2库,其中包含支持真…

计算机专业刚毕业本科生,计算机专业应届本科毕业生自我鉴定

计算机专业应届本科毕业生自我鉴定四年的大学生活是我人生这条线上的一小段,是闪闪发光的一段,它包含了汗水和收获,为我划平人生的线起着至关重要的作用。四年大学生活已接近尾声,感觉非常有必要总结一下大学四年的得失&#xff0…

佳能c3320怎么设置接收方_入门级单反相机佳能800D是否值得买?在我看来价格决定一切...

佳能入门级单反相机800D是否值得买看了就清楚旺灵龙如果你是一位刚刚准备购买数码单反相机的入门小白,佳能最新的EOS 800D的肯定是你现在最容易拿来对比的选择。新相机在性能与操作便利性方面的良好结合,无疑将是入门级单反性价比最高的一款机型。佳能(C…

Objective-c @property和@Synthesize

在Objective-c中,使用property来标识属性(一般是实例变量)。在实现文件中使用synthesize标识所声明的变量,让系统自动生成设置方法和获取方法。 也就是说property和synthesize配对使用,让系统自动生成设置方法和获取方…

文件上传控件 css,CSS3 自定义文件上传输入控件界面

CSS语言:CSSSCSS确定body{background: white;}.wrap {max-width: 60%;margin: 50px auto;}.file {position: relative;display: inline-block;cursor: pointer;height: 2.5rem;}.file input {min-width: 14rem;margin: 0;filter: alpha(opacity0);opacity: 0;}.file…

php接口返回一个数组怎末写_php api返回json数组

[PHP] 为JSON数据的API返回空数组或者空对象PHP 中,不管是 list 或者 dictionary 都使用一样的 [](或者 array()) 来定义。在使用 JSON 作为 API 数据 Content-Type 的时候,会有这样一个问题:如何返回一个空对象和一个空数组?使用…

stm8时钟源

下面4种时钟源可用做主时钟: 1-24MHz高速外部晶体振荡器(HSE)最大24MHz高速外部时钟信号(HSE user-ext)16MHz高速内部RC振荡器(HSI)128KHz低速内部RC(LSI)各个时钟源可单独打开或关闭,从而优化功耗。 (一)HSE 高速外部时钟信号可由下面两个时钟源产生&am…

nexus 仓库类型_Maven私服Nexus的搭建

私服存在的合理性Maven中的依赖是从服务器仓库中下载的,Maven的仓库只有两大类:本地仓库远程仓库,其中在远程仓库中又分成了3种:中央仓库 、私服、其它公共库。Maven用户直接连接远程仓库下载构件的做法是Maven不建议使用的&#…

用soapUI测试webservice

测试webservice时,有时需要写一个客户端来向服务端发起请求才可以测试服务,最近看到一款工具soap ui,也可以调试VS2010中的程序。 首先要把webservice 发布到本地,网上已经有发布本地的例子,这里就不细说了。发布之后&…

ae中心点重置工具_AE中图形绘制的6大技巧,简单易操作

AE中的图形系统和文字系统很相似,都有自己相对独立的一套基础动画系统。当我们打开AE软件,面对空白的面板,如何通过一步步的操作填充画面,做出酷炫的效果,这其中图形占据很大的比重,更不用说流行的MG动画&a…

360浏览器 ajax取缓存,web开发遇到的坑之360浏览器缓存问题

web开发遇到的坑之360浏览器缓存问题再使用360浏览器,浏览我自己开发的一个配置的web管理后台时,发现,使用ctrlF5都不能刷新表格的数据,还有,我添加字段时,明明是添加成功的,用sql再数据库查都能…

Mac安装软件报“打不开。。。,因为它来自身份不明的开发者”的解决办法

问题描述 在Mac上安装git,双击pkg进行安装,报如下图错误: 解决办法 不要双击pkg文件,改成选中文件之后,鼠标右键,选择“打开方式->安装器(默认)”,即可继续安装。 转载…

模型预测控制c语言程序_搭建第一个程序控制电路LED灯,体会C语言的魅力

学习C语言,先从读程序开始!这一点是过来人的经验之谈。本文建议大家选择一款图形编程软件,本文选择了Mixly。一、首先,介绍一下arduino UNO控制器内部电压的问题。v 高电平(5V):对应数值是1,输入状态3.5V-5…

ajax通过什么实现,ajax(通过jQuery实现)

使用jQuery实现ajax相对来说方便一点,看w3cschool有几种实现的方法,我就总结一下自己以后会用到的几种方法$.ajax方法:$.ajax方法里面有很多个参数可以使用,但我这里就写自己常用的几个参数:1.url:要求为String类型的参…

mysql: you can't specify target table 问题解决

首先创建一个表: CREATE TABLE t1 ( id INT(11) NULL DEFAULT NULL, name VARCHAR(20) NULL DEFAULT NULL ) 插入几条数据: mysql> select * from t1; ------------ | id | name | ------------ | 1 | chen | | 2 | li | | 3 | huan | -…

s丅7318是啥芯片_透彻解析LED驱动芯片HT1632C指令集与驱动编程

HT1632C是一款很常用的LED(数码管或点阵)驱动芯片,虽然官方已经宣布该芯片明年(2021年)即将寿终正寝(停产),但是相同厂家生产的同系列芯片的控制方式通常是相同的(事实上,大多数LED驱动芯片差别也不大),所以了解HT1632C的控制原理…

服务器显示不明用户远程过,服务器显示不明用户远程过

服务器显示不明用户远程过 内容精选换一换Windows操作系统云服务器蓝屏,如图1所示。使用了来源不明的第三方软件。CPU占用过高导致。因为误操作或者病毒引起的系统文件、注册表损坏。操作系统在蓝屏的情况下,会显示对应的bugcheck code以及可能的导致蓝屏…