问题：重叠，因此单行堆叠的水平栏中的dataLabels不可读。
用户aus_lacy帮我实现了以下代码（尤其是在此answer中）：
的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工作正常，这可能会提供解决方案，因为如果在standard pie chart的distance: 100, ... dataLabels:{内添加}，可以清楚地注意到其中的区别。但是饼图显然不是单行堆叠的水平条吗？也许另一个选择是使用
useHTML选项（请参阅Highcharts API条目），尽管我不知道如何使事情正常进行。我认为最简单的方法是使每个下一个
dataLabel略低于上一个？有人能做到吗？某些<br>内或多或少的刹车（dataLabel）会产生更多的可能性，但是我无法实现此atm。...更优雅的东西？
最佳答案
我发现的解决方法是旋转dataLabels。
将旋转rotation:-45放在dataLabels:{ ... }内，然后将'<br>'…内的formatter:function(){var dlabel=更改为}（具有单行标签。附加的制动器（': '））可以在<br>之前添加以提高可读性（不幸的是，我似乎无法添加更多的Oceania）。
给出以下代码（从问题中复制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] } ] });});
不幸的是，为了获得更好的结果，可能会在HTML代码中将
<br>放大，这是可以避免的。更进一步：现在，我们在一个
width上实现了全行间距，但最好将此dataLabel移动仅该距离的1/2或该距离的1/3；然后将周围的Label移开相同的距离，远离重叠的Label；以获得更均匀的布局。关于javascript - Highcharts单行堆叠的水平条:标签重叠—条段太小而无法读取“dataLabels” —(更改“dataLabels”的“距离”？)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28126688/