Highcharts树图数据标签溢出

Question

在使用Highcharts多级树映射时，我遇到了数据标签溢出问题。数据标签溢出到其他区域。这在级别1&2当我使用选项溢出时：'crop'但在级别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