如何在高于列时隐藏stackLabel在highcharts中

Question

当标签中的文本大于列时，如何在highCharts中隐藏stackLabel（列上方的标签）（如下图所示）。 当我的数据超出列宽时，我想显示空字符串。

这是负责显示数据的代码的一部分：

yAxis: {
    stackLabels: {
        style: {
            color: 'black'
        },
        enabled: true
        formatter: function () {                    
             return this.total + " mm ";
       }
    }
}

Answer 1

创建一个循环堆栈标签的函数，并将它们的宽度与点的宽度进行比较 - 根据比较隐藏或显示标签。

功能可以如下所示：

function hideLabel() {
  const axis = this.yAxis[0];
  const stacks = axis.stacks.column;
  const pointWidth = this.series[0].points[0].shapeArgs.width;

  Object.keys(stacks).forEach(key => {
    const label = stacks[key].label;

    label.attr({
      visibility: label.getBBox().width > pointWidth ? 'hidden' : 'visible'
    });
  })
}

在加载和重绘事件上设置此功能：

 chart: {
    type: 'column',
    events: {
      load: hideLabel,
      redraw: hideLabel
    }
},

示例：http://jsfiddle.net/nq5ke47z/