Переполнение меток в древовидной карте

Question

при использовании многоуровневой древовидной карты Highcharts я столкнулся с проблемой переполнения меток данных.Метки данных перетекают в другую область.Это прекрасно работает на уровне 1 и 2, когда я использую опцию overflow: 'crop' , но не работает на уровне 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

К сожалению, Highcharts не скрывает метки, когда они не соответствуют 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