【问题标题】:Highcharts stacked bar chart hide data labels not to overlapHighcharts堆积条形图隐藏数据标签不重叠
【发布时间】:2013-07-03 22:26:07
【问题描述】:

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

所以,我有堆积条形图,当数据标签不适合该区域时,我想隐藏它们。以类别 8 为例,根本没有数据标签“4”。

我看到:http://api.highcharts.com/highcharts#plotOptions.bar.dataLabels.crop,据我了解,它应该自动完成,但由于某种原因不起作用。

我试图以像素为单位计算系列的宽度(或高度)以通过格式化程序函数控制显示/隐藏,但我无法获得条形系列的宽度。

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

提前感谢您的帮助。

已修复:

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

【问题讨论】:

  • 裁剪选项不是你想的那样...

标签: highcharts


【解决方案1】:

您可以在每个系列中的每个点进行迭代,然后检查条的宽度并在宽度小于 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();
        });
    });

【讨论】:

  • 伟大的解决方案塞巴斯蒂安;然而,我遇到了堆叠列的一个小问题。当绑定到redraw 事件时;切换系列的可见性后,我收到错误:Cannot read property 'namespaceURI' of undefined。我发现的一个小解决方法是hide() 而不是destroy()
  • 你有现场演示吗?
  • 这不适用于导出为 PNG/JPEG。你能有我在导出时可以应用的相同类型的解决方案吗?
  • 您需要将循环从回调移动到图表/事件/加载。示例:jsfiddle.net/HA5xE/20
  • 这应该是内置的。谢谢。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-06-18
  • 1970-01-01
相关资源
最近更新 更多