$(function () {
$('#container').highcharts({
chart: {
type: 'bar',
backgroundColor: null,
width: 360
},
title: {
text: null,
style: {
display: 'none'
}
},
subtitle: {
text: null,
style: {
display: 'none'
}
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
xAxis: {
categories: ['Cat 1', 'Cat 2', 'Cat 3', 'Cat 4', 'Cat 5', 'Cat 6', 'Cat 7', 'Cat 8', 'Cat 9', 'Cat 10'],
title: {
text: null
}
},
yAxis: {
min: 0,
max: 10,
gridLineWidth: 0,
minorGridLineWidth: 0,
title: {
text: null
},
labels: {
enabled: false
}
},
tooltip: {
enabled: false
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
},
series: {
dataLabels: {
crop: false,
enabled: true,
y: -2,
inside: false
}
}
},
series: [{
showInLegend: false,
name: '',
color: '#CCC',
data: [1, 2, 3, 9.4, 5, 6, 8, 9, 9, 9.5]
}]
});
});
jsfiddle: http://jsfiddle.net/uNrW2/1/
我似乎不能让系列数据的标签总是出现在栏的右侧。我已经浏览了所有的API,我似乎找不到一个选项来阻止文本被移动到栏中。
有人知道为什么会发生这种情况吗?非常感谢您的宝贵时间!
您错过了API中称为plotOptions.series.dataLabels.overflow
(API)的一个选项:
溢出:字符串
如何处理在绘图区域外流动的数据标签。默认值是
justify
,它在绘图区域内对齐它们。对于列和条,这意味着它将在条内移动。若需要在绘图区外显示数据标签,则将"crop
"设置为"false
",将"overflow
"设置为""none"
"。默认为对齐
换句话说,您需要组合裁剪和溢出,像这样(更新的JSFiddle):
plotOptions: {
series: {
dataLabels: {
enabled: true,
crop: false,
overflow: 'none'
}
}
}