Question

在使用Highcharts多级树形图时，我遇到了数据标签溢出问题。数据标签溢出到其他区域。当我使用选项 overflow：'crop'时，在第1和第2层工作正常，但在第3层不起作用。不知道哪里出了问题。

在示例区域中，名称为：F的数据标签在此处溢出，但级别2的名称为：C的数据标签未在其中溢出。

$(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点区域时，Highcharts不会隐藏标签。解决方法是，您可以遍历每个数据点并检查与之相关的标签是否更宽。如果它更宽，则将其隐藏。

代码：

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

Highcharts树图数据标签溢出

1 个答案: