Highcharts堆叠条形图隐藏数据标签不重叠 [英] Highcharts stacked bar chart hide data labels not to overlap

问题描述

请查看： http://jsfiddle.net/HA5xE/

因此，我已经堆积了条形图，并且我们希望在不符合该区域时隐藏数据标签。例如类别8，根本没有数据标签4。

我看到： http://api.highcharts.com/highcharts#plotOptions.bar.dataLabels.crop ，据我所知它应该自动完成，但因为某些原因无法正常工作。

我试图计算系列是以像素为单位的宽度（或高度）来控制通过格式化函数显示/隐藏，但我无法获得栏系列宽度。

  formatter：function（）{
 if（this.percentage.toFixed（0）> ; 0）
返回this.percentage.toFixed（0）; 
 else 
 return''; 
} 
  

感谢您的帮助。

FIXED：

  formatter：function（）{
 if（this.point.yBottom  - this.point.plotY> 13）
返回this.percentage.toFixed（0）; 
 else 
 return''; 
 
  

解决方案

在每个serie中，然后检查bar的宽度并销毁标签，如果widht小于ie.15px。

http://jsfiddle.net/HA5xE/1/ $ b

  $ .each（图表.series，function（i，serie）{
 $ .each（serie.data，function（j，data）{
 if（data.yBottom  -  data.plotY< 15）
 data.dataLabel.destroy（）; 
}）; 
}）; 
  

Please check out this: http://jsfiddle.net/HA5xE/

So, I have stacked bar chart and I want to hide data labels when they don't fit in the area. for Example in Category 8, not to have data label "4" at all.

I saw: http://api.highcharts.com/highcharts#plotOptions.bar.dataLabels.crop and as I understand it should be done automatically, but for some reason doesn't work.

I tried to calculate series are width (or height) in pixels to control show/hide by formatter function, but I was unable to get bar series width.

formatter: function() {
if(this.percentage.toFixed(0)>0)
    return this.percentage.toFixed(0);
else 
    return '';
}

Thanks for your help in advance.

FIXED:

formatter: function() {
if(this.point.yBottom - this.point.plotY>13)
    return this.percentage.toFixed(0);
else 
    return '';
}

解决方案

You can iterate in each point in each serie, then check width of bar and destroy label if widht is smaller than ie.15px .

http://jsfiddle.net/HA5xE/1/

 $.each(chart.series,function(i,serie){
        $.each(serie.data,function(j,data){
            if(data.yBottom - data.plotY < 15)
                data.dataLabel.destroy();
        });
    });

这篇关于Highcharts堆叠条形图隐藏数据标签不重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！