高图表树状图数据标签溢出

Question

在使用高级图表、多级树状图时，我遇到了数据标签溢出问题。数据标签溢出到其他区域。当我使用选项溢出：“裁剪”时，这在第1级和第2级很好，但在第3级不起作用。

这里，在名称为:f数据标签溢出的示例区域中，具有名称:c的数据标签在2级时不会溢出。

这里是小提琴的例子。

$(function() {
var H = Highcharts;

$('#container').highcharts({

  chart: {
    type: 'treemap',
    width: 500
  },
  title: {
    text: null
  },
  plotOptions: {
    series: {
      layoutAlgorithm: 'stripes',
      alternateStartingDirection: true,
      levels: [{
        level: 1,
        dataLabels: {
          enabled: true,
          align: 'left',
          verticalAlign: 'top'
        }
      }, {
        level: 2,
        dataLabels: {
          formatter: function () {
            return this.point.realValue;
          },
          overflow: 'crop'
        }
      }, {
        level: 3,
        dataLabels: {
          formatter: function () {
            return this.point.realValue;
          },
          overflow: 'crop'
        }
      }]
    }
  },
  series: [{
    data: [{
      name: 'A',
      id: 'A',
      value: 1,
      color: '#FFFFFF'
    }, {
      name: 'B',
      id: 'B',
      value: 1,
      color: '#FFFFFF'
    }, {
      name: 'C',
      parent: 'A',
      id: 'A-1',
      value: 10,
      realValue: 'thisisveryveryveryveryveryverylongteststring',
      color: '#ECEA8E'
    }, {
      name: 'D',
      parent: 'A',
      id: 'A-2',
      color: '#FFFFFF'
    }, {
      name: 'E',
      parent: 'A-2',
      id: 'A-2-1',
      value: 10,
      realValue: 'A',
      color: '#599753'
    }, {
      name: 'F',
      parent: 'A-2',
      id: 'A-2-2',
      value: 10,
      realValue: 'thisisveryveryveryverylongteststring',
      color: '#1B3C40'
    }, {
      name: 'G',
      parent: 'B',
      id: 'B-1',
      value: 10,
      realValue: 'A',
      color: '#ECEA8E'
    }, {
      name: 'H',
      parent: 'B',
      id: 'B-2',
      color: '#FFFFFF'
    }, {
      name: 'I',
      parent: 'B-2',
      id: 'B-2-1',
      value: 10,
      realValue: 'A',
      color: '#599753'
    }, {
      name: 'J',
      parent: 'B-2',
      id: 'B-2-2',
      value: 10,
      realValue: 'A',
      color: '#1B3C40'
    }]
  }]
});

})；

Answer 1

不幸的是，当高图表不适合treemap点区域时，它们不会隐藏标签。作为一种解决办法，您可以循环遍历每个数据点，并检查与其相关的标签是否更宽。如果它更宽，就把它藏起来。

代码：

chart: {
  type: 'treemap',
  width: 500,
  events: {
    load: function() {
      var chart = this,
        series = chart.series[0],
        pointWidth,
        labelWidth;

      series.data.forEach(function(point) {
        if (point.dataLabel) {
          pointWidth = point.shapeArgs.width;
          labelWidth = point.dataLabel.width;

          if (labelWidth > pointWidth) {
            point.dataLabel.hide();
          }
        }
      });
    }
  }
}

演示：

https://jsfiddle.net/BlackLabel/h65xm4qb/

API参考：

https://api.highcharts.com/class-reference/Highcharts.SVGElement#hide