highcharts图表:如何配置坐标轴数据过大是否折算进行单位(k,M,G,T,P,E)替换
来源:互联网 发布:淘宝客服下班结束语 编辑:程序博客网 时间:2024/05/21 17:03
最近有不少Highcharts图表用户在询问关于坐标轴刻度值数据过大会自动加上k,M,G,T,P,E一些单位字符的问题。这类问题开始一看还以为是坐标轴内刻度格式化formatter方法的问题,经过试验是行不通的。无奈之余看了看highcharts.js的源代码,通过CTRL+F查找"k",看发现这些配置信息是由属性:numericSymbols控制着。源代码是这样写的:
1.
,decimalPoint:
"."
,numericSymbols:
"k,M,G,T,P,E"
.split(
","
),
将其在api.highcharts.comAPI文档内查找numericSymbols才得知其说明如下:
1.
numericSymbols: Array<
String
>Since 2.3.0
2.
Metric prefixes used to shorten high numbers in axis labels. Replacing any of the positions with null causes the full number to be written. Setting numericSymbols to null disables shortening altogether. Defaults to [ "k" , "M" , "G" , "T" , "P" , "E"].
通过这一段英文描述大致可以看出来是这样一个意思:
1.
用于配置后缀以此缩短轴上刻度的大数据占位问题,让设置为null时,则不换算后缀加以替换。默认情况下是配置数组[ "k" , "M" , "G" , "T" , "P" , "E"]
这样一来我们想要让刻度大数据不换算单位就变得很好解决了。
1、配置lang内的numericSymbols属性值
在new Highcharts.Chart()前首先通过Highcharts.setOptions()设置全局变量,示例代码如下所示:
1.
Highcharts.setOptions({
2.
lang: {
3.
numericSymbols:
null
// 不换算单位
4.
}
5.
});
完整示例代码如下所示:
01.
$(
function
() {
02.
Highcharts.setOptions({
03.
lang: {
04.
numericSymbols:
null
05.
}
06.
});
07.
08.
$(
'#container'
).highcharts({
09.
chart: {
10.
},
11.
title:{
12.
text:
"如何让坐标刻度大数据不自动追加后缀k、M等符号示例"
13.
},
14.
xAxis: {
15.
categories: [
'Jan'
,
'Feb'
,
'Mar'
,
'Apr'
,
'May'
,
'Jun'
,
'Jul'
,
'Aug'
,
'Sep'
,
'Oct'
,
'Nov'
,
'Dec'
]
16.
},
17.
yAxis: {
18.
type:
'logarithmic'
19.
},
20.
credits:{
21.
text:
"www.stepday.com"
,
22.
href:
"http://www.stepday.com"
,
23.
style:{
24.
color:
"red"
25.
}
26.
},
27.
series: [{
28.
data: [0.029, 71.5, 1.06, 1292, 14400, 1.760, 135, 1480, 0.0216, 0.194, 9.56, 54.4]
29.
}]
30.
});
31.
});
查看效果地址:http://fiddle.jshell.net/tdB5j/1/show/
转载:http://www.stepday.com/topic/?819" 0 0
- highcharts图表:如何配置坐标轴数据过大是否折算进行单位(k,M,G,T,P,E)替换
- K、M、G、T、P、E、B,你知道都是10的多少次方吗?
- k、M、G、T 硬盘单位-简单说
- 几个工程符号 T,G,M,K,f,p,n
- p a r e n t . f r a m e s . l e n g t h
- 【备份】【简单值转换器】流量值按K/M/G/T/P显示
- B,K,M,G,T大小转换
- 如果令 A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 分别等于
- 前端 Highcharts图表,如何动态传入数据
- 三、highcharts 如何设置图表配置选项
- c u b e m x E t h P t p 如 何 激活
- 十六进制数对应内存单位(K、M、G)大小
- Linux:ls以K、M、G为单位查看文件大小
- Linux:ls以K、M、G为单位查看文件大小
- Wi n d o w s函数l s t r c m p和l s t r c m p i是作为对Wi n d o w s函数 C o m p a r e S t r i n g的调用来实现
- Highcharts图表结构分析:详解坐标轴及其类型
- gethibernatetemplate的find方法大全
- getHibernateTemplate()和getSession()的区别
- IE浏览器下的JS鼠标特效(文本跟随鼠标环绕的特效)
- 安卓开发之WebView控件只用
- Spark磁盘空间满了
- Ngrok穿透工具的使用
- 世界上主流的五大浏览器及其内核
- highcharts图表:如何配置坐标轴数据过大是否折算进行单位(k,M,G,T,P,E)替换
- poj 2976 && poj 2728 && poj3621 && bzoj 1486 01分数规划
- 蓝桥杯2017模拟赛-还款计算
- STL在使用算法竞赛中的使用方法 (教程+未完成)
- POJ 2385 Apple Catching
- java虚拟机随手笔记(4)内存调优与案例分析
- 动态配置配置文件路径
- MyBatis总结
- Android SDK Manager和AVD Manager使用