(转)数字格式化函数: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,一经查实,立即删除!

相关文章

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

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

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

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

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

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

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

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

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不建议使用的&#…

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

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

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

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

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

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

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

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

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

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

微信小程序定义全局变量_微信小程序第二天学习内容分享

微信小程序的生命周期文件的配置在app.js文件中;方法:onLaunch,onShow,onHideapi链接:https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html#onHideonError,当前也可以自定义,用console测试事件的执行情况&a…

java环境配置—配置Tomcat8环境

先安装JDK,配置好jdk环境后再配置Tomcat 8配置环境变量:TOMCAT_HOME:D:\Program Files\apache-tomcat-8.0.28  CATALINA_HOME:D:\Program Files\apache-tomcat-8.0.28  CATALINA_BASE:D:\Program Files\apache-tomcat-8.0.28修改CLASSPAT…

ios13苹方字体ttf_字体 | iOS1013 SF Compact Rounded 英文 By alex

最近沉迷游戏,差点忘记了这个英文。嗨呀,问就是在玩了,啊不,在做了。这个英文来自推特alexman,原版包含100和85大小,本次分享新增到了100-60,每5%一个大小。gzh分享已经获得alex授权&#xff0c…

10双屏鼠标过不去_灵耀X2 Duo双屏笔记本是怎样“炼”成的?对话华硕笔记本设计团队...

2020年的CES上,华硕推出了一款灵耀X2 Duo笔记本,灵耀X2 Duo采用了和灵耀X2 Pro相同的屏幕技术,C面同样采用了一块ScreenPad Plus副屏,机身也更轻更薄。如今灵耀X2 Duo的处理器升级至英特尔第十代酷睿,正在参与“618”大…

理解 OpenStack 高可用(HA) (6): MySQL HA

本系列会分析OpenStack 的高可用性(HA)概念和解决方案: (1)OpenStack 高可用方案概述 (2)Neutron L3 Agent HA - VRRP (虚拟路由冗余协议) (3)Neu…

聚类中心坐标公式如何使用_如何使用CAD看图软件来测量坐标?

当我们在拿到图纸的时候,经常会需要使用测量工具,再次测量dwg图纸上的数据。浩辰CAD看图王软件,不仅可以看图,也可以编辑图纸,测量功能更是很方便,当我们在测量的时候,如何测量图纸上点的坐标呢…

德利捷读码器设置软件_S7-1500PLC+变频器+编码器组成位置控制系统

PLC学习中组成部分:位置控制、力矩控制、惯量控制。位置控制模式S7-1500 的运动控制功能支持轴的定位和移动,是 S7-1500 系列 CPU 众多集成功能中的重要组成部分。运动控制功能支持旋转轴、定位轴、同步轴和外部编码器等工艺对象。根据PLC-Open&#xff…

解决 c3p0 和 MySQL 集成情况下,连接长时间闲置后重新使用时报错的问题

MySQL 的默认设置下,当一个连接的空闲时间超过8小时后,MySQL 就会断开该连接,而 c3p0 连接池则以为该被断开的连接依然有效。在这种情况下,如果客户端代码向 c3p0 连接池请求连接的话,连接池就会把已经失效的连接返回给…

汇编语言基础知识摘要(《汇编语言》王爽)第 1 / 17 章

CPU,是计算机的核心部件,它控制整个计算机的运作并进行运算。存储器,即内存,存放CPU需要的指令和数据。寄存器,是CPU中可以储存数据的器件,一个CPU中有多个寄存器。汇编语言由以下3类指令组成: …