[英]Highcharts data labels overlapping columns
我的图表中的数据标签重叠列有问题。
$('#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
}
}]
});
});
你可以在这里看到一个例子: http : //jsfiddle.net/J6WvR/1/
我的图表应该有固定的高度,我不明白为什么不能计算最大的列高度以适合其数据标签。 我该如何解决这个问题?
根据官方API文档: 溢出属性
要在绘图区域外显示数据标签,请将crop 设置为false ,将overflow 设置为“ none ”。
dataLabels: {
enabled: true,
crop: false,
overflow: 'none'
}
你可以尝试 yAxis 的最大值,
根据您的数据计算最大值并添加一些缓冲,例如 100 并将其设置为 yAxis 的最大值
yAxis:{
max: 600,
},
在http://jsfiddle.net/J6WvR/3/用 max for yAxis 更新你的小提琴
希望这对你有用
一种选择是移动标签的位置。 例如,这会将它们移动到条形内:
plotOptions: {
column: {
dataLabels: {
y: 20,
color:'white'
}
}
},
另一种方法是手动设置最大 y 值为标签腾出空间:
yAxis: {
max: 600,
endOnTick: false
},
希望这些选项之一会有所帮助。
Ivan Chau 发布了第三个(可能更好)的选项。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.