HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="width:500px; height: 300px"></div>

JS（需要的jQuery）

$(function(){$('#container').highcharts({chart:{backgroundColor:'gray',type: 'bar'},colors:['white'],credits:{enabled:false},title: {text:'Head and neck cancers (HNC)'},
xAxis:{categories:['Estimated 5-year prevalent cancer cases (×1000)'],lineWidth: 0,tickWidth:0,labels: {enabled:false,}},
yAxis:{min:0,title:{text:''},gridLineWidth:0,lineWidth:0,labels:{enabled:false,} }, legend: {enabled:false },
plotOptions: { series: { stacking: 'normal', borderColor: 'black' }, bar: { dataLabels: {enabled: true, distance : -50, formatter: function() { var dlabel = this.series.name + '<br>'; dlabel += Math.round(this.percentage.toFixed(1)*100)/100 + ' %'; return dlabel }, style: { color: 'black', }, }, }, },
series: [{ name: 'Oceania', data: [17]} , { name: 'Africa', data: [94]}, { name: 'Latin America and Carribean', data: [122]} , { name: 'Northern America', data: [181]}, { name: 'Europe', data: [383]},{ name: 'Asia', data: [886] } ] });});

他的回答是完全完美的，但现在我想用一个新的实现，一些酒吧段得到太小揭示的文本dataLabels （见渲染code以上）。

也许......或死角？

在distance:-50,里面dataLabels:{ ... } （内plotOptions:{bar:{ ... } ）似乎没有任何工作更长的时间。

我想，如果这个distance被运行，这可能提供了一个解决方案，因为如果一个如增加了distance: 100,里面dataLabels:{ ... }中标准的饼图，可以清楚地发现其中的差别。但是饼图显然不是堆积单杠单行？

也许是另一种选择是使用useHTML -选项（参见Highcharts API条目），虽然我不能弄清楚如何把事情的工作。
我认为，最简单的办法是有一个各dataLabel略低于前一个？任何人都可以做到这一点？更多或更少的制动器（ <br>的）某些内部dataLabel的会创造更多的可能性，但我不能做到这一点大气压。
...什么更优雅？

我已经找到了解决方法是旋转dataLabels 。

把一个旋转rotation:-45内部dataLabels:{ ... }和变化'<br>'内formatter:function(){var dlabel= ... }以': ' （具有单行的标签的附加制动。（ <br> ）可前加入Oceania以提高可读性（可惜我不能似乎能够增加更多的<br>的）。

这给下面的代码（复制从问题的HTML）：

JS（需要的jQuery）

$(function(){$('#container').highcharts({chart:{backgroundColor:'gray',type: 'bar'},colors:['white'],credits:{enabled:false},title: {text:'Head and neck cancers (HNC)'},
xAxis:{categories:['Estimated 5-year prevalent cancer cases (×1000)'],lineWidth: 0,tickWidth:0,labels: {enabled:false,}},
yAxis:{min:0,title:{text:''},gridLineWidth:0,lineWidth:0,labels:{enabled:false,} }, legend: {enabled:false },
plotOptions: { series: { stacking: 'normal', borderColor: 'black' }, bar: { dataLabels: {enabled: true, distance : -50, rotation:-45, formatter: function() { var dlabel = this.series.name + ': '; dlabel += Math.round(this.percentage.toFixed(1)*100)/100 + ' %'; return dlabel }, style: { color: 'black', }, }, }, },
series: [{ name: '<br>Oceania', data: [17]} , { name: 'Africa', data: [94]}, { name: 'Latin America and Carribean', data: [122]} , { name: 'Northern America', data: [181]}, { name: 'Europe', data: [383]},{ name: 'Asia', data: [886] } ] });});

不幸的是，争取更好的成绩，在width或许可以在HTML代码，这是要避免的扩大。

进一步：现在我们实现了一个完整的行距额外dataLabel ，但它会更好地推动这一Label只有1/2的距离，或者只是距离的1/3; 并移动周围Label从重叠（'S）的距离相同，离Label ; 一个更均匀分布的布局设计。