Highcharts单行堆叠水平条：标签重叠---条片段太小而无法读取“dataLabels” ---（改变“dataLabels”的“距离”？） [英] Highcharts single row stacked horizontal bar: labels overlap --- bar segments too small to read "dataLabels" --- (change "distance" of "dataLabels"?)

问题描述

问题：重叠，因此无法读取 dataLabels 在单行堆叠水平栏中。

用户 aus_lacy 非常好地帮助我实现了以下代码（特别是在answer ）：

HTML

 < script src =http：// code .highcharts.com / highcharts.js>< /脚本> 
< div id =containerstyle =width：500px; height：300px>< / div> 
  

JS（需要jQuery）

<$ p $ （图表：{背景颜色：'灰色'，类型：'酒吧'}，颜色：['白色']，信用额度：{enabled：false}，title：{text：'头颈部癌症（HNC）'}，
xAxis：{类别：['估计的5年流行癌症病例（×1000）']，lineWidth： 0，tickWidth：0，labels：{enabled：false，}}，
yAxis：{min：0，title：{text：''}，gridLineWidth：0，lineWidth：0，labels：{enabled：false ，}}，图例：{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} ，风格：{color：'black'，}，}，}，}，
series：[{name：'Oceania'，data：[17]}，{name：'Africa'，data：[94 ]}，{名称：'拉丁美洲和加勒比'，数据：[122]}， {name：'Northern America'，data：[181]}，{name：'Europe'，data：[383]}，{name：'Asia'，data：[886]}]}）;}）;

他的回答非常完美，但现在我想用一个新的实现，太小而无法显示 dataLabels 的文本（请参阅上面呈现的代码）。

---

也许...或死胡同？

• distance：-50， 里面 dataLabels：{ ... plotOptions：{bar：{ ... }


我想如果这个 ）似乎不再工作。距离 正在工作，这可能会提供一个解决方案，因为如果一个例如在 dataLabels：{ ... }中添加 distance：100， 在，人们可以清楚地看到差异。但是一个饼图显然不是单行堆叠横条？

• 也许另一种选择是使用 useHTML -option（请参阅 Highcharts API 条目），但我无法弄清楚如何让事情顺利进行。

我认为最简单的做法是让每个下一个 dataLabel 略低于前一个？任何人都可以做到这一点在某些 dataLabel 内部或多或少刹车（< br> 的）会创造更多的可能性，但是我无法实现这个atm。 我找到的一个修复方法是旋转 dataLabels 。





• 在 dataLabels中放置轮换轮换：-45 ：{ ... } 并在内更改'< br>' formatter：function （）{var dlabel = ... } to '：'可以在 Oceania 之前添加额外的制动器（< br> ）以提高可读性（不幸的是，我似乎无法添加更多< br> 的）。






其中给出了以下代码（从问题中复制HTML）：
$ b

JS（需要jQuery）





  $（function（）{$（'＃container'）。highcharts（{chart：{backgroundColor：'gray'，type：'bar'}，colors：['white ']，学分：{enabled：false}，title：{text：'Head和脖子癌症（HNC）'}，
 xAxis：{类别：['估计5年流行的癌症病例（×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 +'％';返回dlabel}，样式：{color：'black'，}，}，}，}，
 series：[{name：'< br>大洋洲'，data：[17]}，{name：'非洲'，数据：[94]}，{名称：'拉丁美洲和加勒比'，数据：[122]}，{名称：'北美'，数据：[181]}，{名称：'欧洲' ：[383]}，{name：'Asia'，data：[886]}]}）;}）; 
  

不幸的是，为了获得更好的结果，宽度或许可以在HTML代码中放大，这是要避免的。





更进一步：现在我们在一个 dataLabel ，但最好将这个标签移动该距离的1/2，或者只移动该距离的1/3。并将周围的标签（的）移动相同的距离，远离重叠的标签;以获得更均匀的空间布局。




Problem: overlapping and thus unreadable dataLabels in single row stacked horizontal bar.

User aus_lacy has kindly helped me to be able to implement the following code (especially in this answer):

HTML

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

JS (needs 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] } ] });});

His answer was completely perfect, but as now I want to use a new implementation, some bar segments got too small to reveal the text of the dataLabels (see the rendered code above).

---

Perhaps ... or dead ends?

• The distance:-50, inside dataLabels:{...} (inside plotOptions:{bar:{...}) doesn't seem to work any longer.

I think if this distance were working, this might offer a solution, since if one e.g. adds distance: 100, inside dataLabels:{...} in the standard pie chart, one can clearly notice the difference. But a pie chart is obviously not a single row stacked horizontal bar?

• Perhaps another option would be to use the useHTML-option (see the Highcharts API entry), although I can't figure out how to get things working.

• I think the easiest would be to have each next dataLabel slightly below the previous one? Could anyone achieve this? More or less brakes (<br>'s) inside certain dataLabel's would create more possibilities, but I can not achieve this atm.

• ... something more elegant?

解决方案

A fix I have found is to rotate the dataLabels.

• Putting a rotation rotation:-45 inside dataLabels:{...} and change '<br>' inside formatter:function(){var dlabel=…} to ': ' (to have single-line-labels. An additional brake (<br>) can be added before Oceania to improve readability (unfortunately I can't seem to be able to add more <br>'s).

Which gives the following code (copy the HTML from the question):

JS (needs 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] } ] });});

Unfortunately, for better results, the width might perhaps be enlarged in the HTML-code, which is to be avoided.

Further more: now we achieved a full line-spacing extra on one dataLabel, but it would be better to move this Label only 1/2 that distance, or only 1/3 of that distance; and move the surrounding Label('s) the same distance, away from the overlapping Label; for a more evenly spaced lay-out.

这篇关于Highcharts单行堆叠水平条：标签重叠---条片段太小而无法读取“dataLabels” ---（改变“dataLabels”的“距离”？）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！