Highcharts 使用数字图表格式化y轴值
我想使用HighCharts在y轴上格式化我的值。假设我通过14000,它应该在y轴上打印14K。我该怎么做?我已经尝试使用numeric.js,但是没有用Highcharts 使用数字图表格式化y轴值,highcharts,numeral.js,Highcharts,Numeral.js,我想使用HighCharts在y轴上格式化我的值。假设我通过14000,它应该在y轴上打印14K。我该怎么做?我已经尝试使用numeric.js,但是没有用 <!DOCTYPE html> <html> <head> <title>Charts demo </title> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrit
<!DOCTYPE html>
<html>
<head>
<title>Charts demo </title>
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
crossorigin="anonymous"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/solid-gauge.src.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
<script >
$(function () {
$('#container').highcharts({
colors: ['#8dafb7', '#f19962', '#e97381', '#f8c465', '#6cd299', '#87cfe2'],
chart: {
type: 'column',
marginBottom : 50,
marginTop : 150,
height : 700
},
title: {
text: ''
},
xAxis: {
categories: ['Q2,16', 'Q3,16', 'Q4,16', 'Q1,17'],
width: 700,
tickmarkPlacement: 'on',
labels: {
y : 40,
style: {
color: '#333333',
fontSize:'25',
fontFamily: 'ProximaNova-Light',
opacity : '.6'
},
}
},
yAxis: {
gridLineWidth: 0,
min: 0,
tickInterval: 20,
title: {
text: ''
},
labels: {
style: {
color: '#333333',
fontSize:'25',
fontFamily: 'ProximaNova-Light',
opacity : '.5'
},
formatter: function() {
return "$"+ this.value ;
}
},
stackLabels: {
style: {
color: '#555555',
fontSize:'25',
fontFamily: 'ProximaNova-Regular'
},
enabled: true,
formatter: function() {
return "$"+ this.total ;
}
}
},
legend:{
enabled:false,
width: 600,
floating: false,
x:50,
align: 'left',
style: {
color: '#555555',
fontSize:'25',
fontFamily: 'ProximaNova-Regular',
opacity : '.8'
},
borderWidth: 0
},
tooltip: {
enabled: false
},
credits : {
enabled : false
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'FTE-OpEx ',
data: [5000, 30000, 40000, 700000],
pointWidth: 30,
}, {
name: 'FTE-CapEx',
data: [20000, 20000, 30000, 20000],
pointWidth: 30
}, {
name: 'AWF-OpEx',
data: [30000, 40000, 4000, 2000],
pointWidth: 30
}, {
name: 'AWF-CapEx',
data: [3000, 4000, 4000, 2000],
pointWidth: 30
}, {
name: 'HW/SW',
data: [3000, 4000, 4000, 20000],
pointWidth: 30
}, {
name: 'Other',
data: [3000, 4000, 4000, 2000],
pointWidth: 30
}]
});
});
</script>
</head>
<body id="body">
<div id="container" style="height: 100%; width: 100%; position: center; margin-left: 5%; "></div>
</body>
</html>
}
返回默认值的格式化程序有问题,请参阅。如果要保留数字符号,请调用defaultLabelFormatter
演示:
请提供一个你已经尝试过的例子。你应该创建一个你的代码的演示,并在你的问题中提供代码和链接,否则我相信你的问题很快就会被解决。如果你需要的是现成的,看看:你不需要digital.js。请显示您的代码,可能您的特定案例需要其他内容,或者您的图表配置禁用了此功能。@pawel fus我已使用代码更新了问题。.请帮助我获取Y轴上的标签。但是使用相同的格式化程序,我无法在每个stackformatter的顶部获得总计:函数{return'$'+this.axis.defaultLabelFormatter.call{value:this.total};}正如您注意到的,stackLabels有点不同,但它是可以实现的:-添加this.value=this.total并使用上面的上下文调用。我得到了小k。如何获取大写字母K和0不随K一起显示@pawel fus,你能帮我换个小k看看吗。例如:关于0,您可以手动添加:
yAxis: {
labels: {
formatter: function() {
return '$' + this.axis.defaultLabelFormatter.call(this);
}
}
}