javascript Highcharts 数据标签重叠列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19397544/
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
Highcharts data labels overlapping columns
提问by hank
I have a problem with data labels overlapping columns in my chart.
我的图表中的数据标签重叠列有问题。
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
type: 'datetime'
},
series: [{
data: [[Date.UTC(2013, 3, 1, 0, 0, 0), 169],
[Date.UTC(2013, 4, 1, 0, 0, 0), 176],
[Date.UTC(2013, 5, 1, 0, 0, 0), 470],
[Date.UTC(2013, 6, 1, 0, 0, 0), 346],
[Date.UTC(2013, 7, 1, 0, 0, 0), 252],
[Date.UTC(2013, 8, 1, 0, 0, 0), 138]],
dataLabels: {
enabled: true
}
}]
});
});
You can see an exmaple here: http://jsfiddle.net/J6WvR/1/
你可以在这里看到一个例子：http: //jsfiddle.net/J6WvR/1/
My chart should have fixed height and I don't understand why the largest column height cannot be calculated to fit its data label. How can I fix this?
我的图表应该有固定的高度，我不明白为什么不能计算最大的列高度以适合其数据标签。我怎样才能解决这个问题？
回答by Ivan Chau
According to official API documentation: overflow property
根据官方API文档：溢出属性
To display data labels outside the plot area, set crop to falseand overflow to "none".
要在绘图区域外显示数据标签，请将crop 设置为false，将overflow 设置为“ none”。
dataLabels: {
enabled: true,
crop: false,
overflow: 'none'
}
回答by Strikers
you can try max for yAxis,
你可以尝试 yAxis 的最大值，
calculate maximum value from you data and add some cushion say 100 to it and set it as max for yAxis
根据您的数据计算最大值并添加一些缓冲，例如 100 并将其设置为 yAxis 的最大值
yAxis:{
max: 600,
},
updating your fiddle with max for yAxis at http://jsfiddle.net/J6WvR/3/
在http://jsfiddle.net/J6WvR/3/用 max for yAxis 更新你的小提琴
hope this will be of use for you
希望这对你有用
回答by SteveP
One option is to move the position of the labels. e.g. this will move them inside the bars:
一种选择是移动标签的位置。例如，这会将它们移动到条形内：
plotOptions: {
column: {
dataLabels: {
y: 20,
color:'white'
}
}
},
An alternative is to manually set the max y value to make room for the label:
另一种方法是手动设置最大 y 值为标签腾出空间：
yAxis: {
max: 600,
endOnTick: false
},
Hopefully one of these options will help.
希望这些选项之一会有所帮助。
A third (and probably better) option was posted by Ivan Chau.
Ivan Chau 发布了第三个（可能更好）的选项。
