highcharts图表:如何配置坐标轴数据过大是否折算进行单位(k,M,G,T,P,E)替换
2017-03-17 19:34
537 查看
最近有不少Highcharts图表用户在询问关于坐标轴刻度值数据过大会自动加上k,M,G,T,P,E一些单位字符的问题。这类问题开始一看还以为是坐标轴内刻度格式化formatter方法的问题,经过试验是行不通的。无奈之余看了看highcharts.js的源代码,通过CTRL+F查找"k",看发现这些配置信息是由属性:numericSymbols控制着。源代码是这样写的:
view sourceprint?
将其在api.highcharts.comAPI文档内查找numericSymbols才得知其说明如下:
view sourceprint?
通过这一段英文描述大致可以看出来是这样一个意思:
view sourceprint?
这样一来我们想要让刻度大数据不换算单位就变得很好解决了。
![](http://www.stepday.com/kindeditor/attached/image/20140224/20140224112333753375.jpg)
1、配置lang内的numericSymbols属性值
在new Highcharts.Chart()前首先通过Highcharts.setOptions()设置全局变量,示例代码如下所示:
view sourceprint?
完整示例代码如下所示:
view sourceprint?
查看效果地址:http://fiddle.jshell.net/tdB5j/1/show/
转载:http://www.stepday.com/topic/?819"
view sourceprint?
1.
,decimalPoint:
"."
,numericSymbols:
"k,M,G,T,P,E"
.split(
","
),
将其在api.highcharts.comAPI文档内查找numericSymbols才得知其说明如下:
view sourceprint?
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"].
通过这一段英文描述大致可以看出来是这样一个意思:
view sourceprint?
1.
用于配置后缀以此缩短轴上刻度的大数据占位问题,让设置为null时,则不换算后缀加以替换。默认情况下是配置数组[ "k" ,"M" ,"G" ,"T" ,"P" ,"E"]
这样一来我们想要让刻度大数据不换算单位就变得很好解决了。
![](http://www.stepday.com/kindeditor/attached/image/20140224/20140224112333753375.jpg)
1、配置lang内的numericSymbols属性值
在new Highcharts.Chart()前首先通过Highcharts.setOptions()设置全局变量,示例代码如下所示:
view sourceprint?
1.
Highcharts.setOptions({
2.
lang: {
3.
numericSymbols:
null
// 不换算单位
4.
}
5.
});
完整示例代码如下所示:
view sourceprint?
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"
相关文章推荐
- highcharts图表常见问题:关于如何设置数据点起始位置为坐标原点的问题分析与总结篇独家爆料
- highcharts图表常见问题:关于如何设置数据点起始位置为坐标原点的问题分析与总结篇(独家爆料)
- 是否需要对网络传输数据进行压缩?如何选择压缩算法?
- highcharts图表组件入门教程:如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度
- ECharts图表组件入门教程:如何动态读取数组内的数据至echarts图表且动态更新图表Y轴刻度单位
- 前端 Highcharts图表,如何动态传入数据
- 回发或回调参数无效。在配置中使用 或在页面中使用 启用了事件验证。出于安全目的,此功能验证回发或回调事件的参数是否来源于最初呈现这些事件的服务器控件。如果数据有效并且是预期的,则使用 ClientScriptManager.RegisterForEventValidation 方法来注册回发或回调数据以进行验证。
- 如何使用自定义表单进行数据安全性配置
- 回发或回调参数无效。在配置中使用 或在页面中使用 启用了事件验证。出于安全目的,此功能验证回发或回调事件的参数是否来源于最初呈现这些事件的服务器控件。如果数据有效并且是预期的,则使用 ClientScriptManager.RegisterForEventValidation 方法来注册回发或回调数据以进行验证。
- 数据运营-如何判断是否要进行数据驱动创新?
- ECharts图表组件中级入门(Axis-axisLabel):图表坐标刻度过多如何设置刻度间隔(interval)以及配置说明
- 三、highcharts 如何设置图表配置选项
- 是否需要对网络传输数据进行压缩?如何选择压缩算法?
- highcharts图表组件如何设置某个数据点的颜色或者数据标签的颜色值
- 使用highcharts绘制图表,如何在tooltip里显示服务器端的其他数据
- echarts图表坐标刻度过多如何设置刻度间隔(interval)以及配置说明
- 回发或回调参数无效。在配置中使用 或在页面中使用 启用了事件验证。出于安全目的,此功能验证回发或回调事件的参数是否来源于最初呈现这些事件的服务器控件。如果数据有效并且是预期的,则使用 ClientScriptManager.RegisterForEventValidation 方法来注册回发或回调数据以进行验证。
- 如何进行跨数据库的数据操作?
- 如何使用VB调用DTS进行数据的导入、导出
- Active Directory如何用C#进行增加、删除、修改、查询用户与组织单位!