>问题：单行堆叠水平条中重叠，因此无法读取dataLabels。
用户aus_lacy很好地帮助我实现了以下代码（尤其是在此答案中）：
.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有效，这可能会提供一个解决方案，因为例如，如果在dataLabels:{内部添加distance: 100,......}标准饼图中，人们可以清楚地注意到差异。但饼图显然不是单行堆叠的水平条吗？
也许另一种选择是使用
useHTML-选项（请参阅 Highcharts API 条目），尽管我不知道如何让事情正常工作。我认为最简单的方法是让每个下一个
dataLabel略低于前一个？谁能做到这一点？或多或少在某些dataLabel内的刹车（<br>）会创造更多的可能性，但我无法实现这个ATM。。更优雅的东西？
我发现的解决方法是旋转dataLabels。
- 在
dataLabels:{里面放一个旋转rotation:-45...}并改变formatter:function(){var dlabel=内部的'<br>'...}到': '（具有单行标签。可以在Oceania之前添加一个额外的制动器（<br>）以提高可读性（不幸的是，我似乎无法添加更多<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;以获得更均匀的布局。