jQuery 如何在 HighCharts 中的每个条形上方添加标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15641438/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add a label above each bar in HighCharts
提问by PradoComp
I'm trying to put a label within a bar chart in Highcharts. In my case above each bar which you can see here:
我正在尝试在 Highcharts 的条形图中放置一个标签。在我的情况下，您可以在此处看到的每个条形图上方：
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Indicator per Sex'
},
xAxis: {
categories: [
'Jan',
'Fev',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dez'
]
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Consults'
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [
{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 29.9, 71.5, 106.4, 129.2, 144.0, 10, 20],
color: '#FF0011',
stack: 0
}, {
data: [30, 176.0, 135.6, 148.5, 216.4, 29.9, 71.5, 106.4, 129.2, 144.0, 10, 20],
color: '#3333FF',
stack: 0
}, {
data: [29.9, 71.5, 106.4, 129.2, 144.0, 29.9, 71.5, 106.4, 129.2, 144.0, 10, 20],
color: '#FF0011',
stack: 1
}, {
data: [30, 176.0, 135.6, 148.5, 216.4, 29.9, 71.5, 106.4, 129.2, 144.0, 10, 20],
color: '#3333FF',
stack: 1
}, {
data: [29.9, 71.5, 106.4, 129.2, 144.0, 29.9, 71.5, 106.4, 129.2, 144.0, 10, 20],
color: '#FF0011',
stack: 2
}, {
data: [30, 176.0, 135.6, 148.5, 216.4, 29.9, 71.5, 106.4, 129.2, 144.0, 10, 20],
color: '#3333FF',
stack: 2
}]
});
});
});`
I tried, but when I add labels appear one label each bar. So, how do this?!
我试过了，但是当我添加标签时，每个条形都会出现一个标签。那么，这怎么办？！
回答by kingkode
add this to your series:
将此添加到您的系列中：
dataLabels: {
enabled: true,
rotation: 0,
color: '#000000',
backgroundColor: '#FFFFFF',
align: 'center',
x: 4,
y: 0,
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
}
of course adjust as needed..
you can also add a formatterto add $ sign and commas for large numbers if you need it..
当然根据需要调整..如果需要，您还可以添加 aformatter以添加 $ 符号和逗号以用于大数字。
EDIT:
just saw it was bar chart..
you will need to add this to your plot options:
编辑：
刚刚看到它是条形图..
您需要将其添加到您的绘图选项中：
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
check out the bar chart demoas well as their api documentation
