HTML

Question

问题：在单行堆叠水平条中重叠且因此不可读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）。 / p>

也许......或死路一条？

distance:-50,内的 dataLabels:{ ... } （plotOptions:{bar:{ ... {{1}似乎不再有用了。

我认为如果 } 有效，这可能会提供一个解决方案，因为如果在standard pie chart中的distance ... distance: 100,内添加dataLabels:{，可以清楚地注意到差异。但饼图显然不是单行堆叠水平条？

也许另一个选择是使用} - 选项（参见Highcharts API条目），虽然我无法弄清楚如何让事情发挥作用。
< / LI>
我认为最简单的方法是让每个下一个useHTML略低于前一个dataLabel？谁能实现这个目标？在某些<br>内部或多或少的制动（dataLabel）会产生更多的可能性，但我无法实现这个大气压。
......更优雅的东西？

Answer 1

我找到的修复方法是轮播dataLabels。

在rotation:-45 ... dataLabels:{内放置}轮换，并将'<br>' ... formatter:function(){var dlabel=内的}更改为': ' （要有单行标签。可以在<br>之前添加额外的制动器（Oceania）以提高可读性（不幸的是，我似乎无法添加更多<br> }＆＃39; S）

其中提供了以下代码（从问题中复制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代码中放大width，这是应该避免的。

更多：现在我们在一个dataLabel上实现了一个完整的行间距，但最好将此Label仅移动1/2个距离，或者只移动1/3距离;并将周围的Label（＆＃39; s）移动相同的距离，远离重叠的Label;使间距更均匀。

Highcharts单行堆叠水平条：标签重叠---条形段太小而无法读取“dataLabels”---（更改“dataLabels”的“距离”？）

HTML

JS（需要jQuery）

也许......或死路一条？

1 个答案:

JS（需要jQuery）