据观察，Highcharts Treemap中的数据标签基于浏览器可见/消失。 Fiddle here
在此示例中，Title2（在最右边的框中）在Chrome中不可见，但在IE 11中可见。可以通过更改图表的宽度或拖动小提琴滑块（垂直）来更改可见性。但这并不一致。我的观察是否正确？如果是这样我该如何解决这个问题？
通过在Level2 DataLabels中添加useHTML：true，还可以看到标签。
$(function () {
var data = [{
"id": "Title1_Grp_Id0",
"name": "Title1",
"value": 14979,
"fqn": "MySelFqn.Title1",
"levelName": "Plant",
"path": "Title1"
}, {
"name": "Error",
"fqn": "MySelFqn.Title1",
"totalEventCount": 14616,
"totalDowntime": 457.0799999998797,
"color": "rgb(0,204,0)",
"id": "Error_Group_Id",
"parent": "Title1_Grp_Id0",
"value": 14616,
"eventType": "Error"
}, {
"name": "None",
"fqn": "MySelFqn.Title1",
"totalEventCount": 363,
"totalDowntime": 53017.05748111113,
"color": "rgb(234,234,234)",
"id": "None_Group_Id",
"parent": "Title1_Grp_Id0",
"value": 363,
"eventType": "None"
}, {
"id": "Title2_Grp_Id1",
"name": "Title2",
"value": 2173,
"fqn": "MySelFqn.Title2",
"levelName": "Plant",
"path": "Title2"
}, {
"name": "Error",
"fqn": "MySelFqn.Title2",
"totalEventCount": 1242,
"totalDowntime": 80.18999999999983,
"color": "rgb(0,204,0)",
"id": "Error_Group_Id",
"parent": "Title2_Grp_Id1",
"value": 1242,
"eventType": "Error"
}, {
"name": "None",
"fqn": "MySelFqn.Title2",
"totalEventCount": 919,
"totalDowntime": 45174.184894999984,
"color": "rgb(234,234,234)",
"id": "None_Group_Id",
"parent": "Title2_Grp_Id1",
"value": 919,
"eventType": "None"
}, {
"name": "Standby",
"fqn": "MySelFqn.Title2",
"totalEventCount": 11,
"totalDowntime": 48,
"color": "rgb(255,191,0)",
"id": "Standby_Group_Id",
"parent": "Title2_Grp_Id1",
"value": 11,
"eventType": "Standby"
}, {
"name": "Breakdown",
"fqn": "MySelFqn.Title2",
"totalEventCount": 1,
"totalDowntime": 18.93,
"color": "rgb(178,49,25)",
"id": "Breakdown_Group_Id",
"parent": "Title2_Grp_Id1",
"value": 1,
"eventType": "Breakdown"
}, {
"id": "Title3_Grp_Id2",
"name": "Title3",
"value": 5246,
"fqn": "MySelFqn.Title3",
"levelName": "Plant",
"path": "Title3"
}, {
"name": "None",
"fqn": "MySelFqn.Title3",
"totalEventCount": 4686,
"totalDowntime": 48073.08156194443,
"color": "rgb(234,234,234)",
"id": "None_Group_Id",
"parent": "Title3_Grp_Id2",
"value": 4686,
"eventType": "None"
}, {
"name": "Error",
"fqn": "MySelFqn.Title3",
"totalEventCount": 508,
"totalDowntime": 38.6000000000001,
"color": "rgb(0,204,0)",
"id": "Error_Group_Id",
"parent": "Title3_Grp_Id2",
"value": 508,
"eventType": "Error"
}, {
"name": "Standby",
"fqn": "MySelFqn.Title3",
"totalEventCount": 34,
"totalDowntime": 4215.05122361111,
"color": "rgb(255,191,0)",
"id": "Standby_Group_Id",
"parent": "Title3_Grp_Id2",
"value": 34,
"eventType": "Standby"
}, {
"name": "Breakdown",
"fqn": "MySelFqn.Title3",
"totalEventCount": 18,
"totalDowntime": 738.9399999999999,
"color": "rgb(178,49,25)",
"id": "Breakdown_Group_Id",
"parent": "Title3_Grp_Id2",
"value": 18,
"eventType": "Breakdown"
}, {
"id": "Title4_Grp_Id3",
"name": "Title4",
"value": 1418,
"fqn": "MySelFqn.Title4",
"levelName": "Plant",
"path": "Title4"
}, {
"name": "None",
"fqn": "MySelFqn.Title4",
"totalEventCount": 634,
"totalDowntime": 50563.53225749999,
"color": "rgb(234,234,234)",
"id": "None_Group_Id",
"parent": "Title4_Grp_Id3",
"value": 634,
"eventType": "None"
}, {
"name": "Error",
"fqn": "MySelFqn.Title4",
"totalEventCount": 467,
"totalDowntime": 69.8700000000002,
"color": "rgb(0,204,0)",
"id": "Error_Group_Id",
"parent": "Title4_Grp_Id3",
"value": 467,
"eventType": "Error"
}, {
"name": "Standby",
"fqn": "MySelFqn.Title4",
"totalEventCount": 223,
"totalDowntime": 11325.920000000001,
"color": "rgb(255,191,0)",
"id": "Standby_Group_Id",
"parent": "Title4_Grp_Id3",
"value": 223,
"eventType": "Standby"
}, {
"name": "Breakdown",
"fqn": "MySelFqn.Title4",
"totalEventCount": 88,
"totalDowntime": 545.9000000000002,
"color": "rgb(178,49,25)",
"id": "Breakdown_Group_Id",
"parent": "Title4_Grp_Id3",
"value": 88,
"eventType": "Breakdown"
}, {
"name": "Planned",
"fqn": "MySelFqn.Title4",
"totalEventCount": 6,
"totalDowntime": 790.7,
"color": "rgb(51,51,255)",
"id": "Planned_Group_Id",
"parent": "Title4_Grp_Id3",
"value": 6,
"eventType": "Planned"
}, {
"id": "Title6_Grp_Id4",
"name": "Title6",
"value": 796,
"fqn": "MySelFqn.Title6",
"levelName": "Plant",
"path": "Title6"
}, {
"name": "None",
"fqn": "MySelFqn.Title6",
"totalEventCount": 429,
"totalDowntime": 83003.57523555551,
"color": "rgb(234,234,234)",
"id": "None_Group_Id",
"parent": "Title6_Grp_Id4",
"value": 429,
"eventType": "None"
}, {
"name": "Error",
"fqn": "MySelFqn.Title6",
"totalEventCount": 290,
"totalDowntime": 26.28000000000002,
"color": "rgb(0,204,0)",
"id": "Error_Group_Id",
"parent": "Title6_Grp_Id4",
"value": 290,
"eventType": "Error"
}, {
"name": "Planned",
"fqn": "MySelFqn.Title6",
"totalEventCount": 5,
"totalDowntime": 171.2,
"color": "rgb(51,51,255)",
"id": "Planned_Group_Id",
"parent": "Title6_Grp_Id4",
"value": 5,
"eventType": "Planned"
}, {
"name": "Breakdown",
"fqn": "MySelFqn.Title6",
"totalEventCount": 19,
"totalDowntime": 1893.2799999999997,
"color": "rgb(178,49,25)",
"id": "Breakdown_Group_Id",
"parent": "Title6_Grp_Id4",
"value": 19,
"eventType": "Breakdown"
}, {
"name": "Standby",
"fqn": "MySelFqn.Title6",
"totalEventCount": 53,
"totalDowntime": 5577.799999999999,
"color": "rgb(255,191,0)",
"id": "Standby_Group_Id",
"parent": "Title6_Grp_Id4",
"value": 53,
"eventType": "Standby"
}, {
"id": "Title5_Grp_Id5",
"name": "Title5",
"value": 1287,
"fqn": "MySelFqn.Title5",
"levelName": "Plant",
"path": "Title5"
}, {
"name": "None",
"fqn": "MySelFqn.Title5",
"totalEventCount": 936,
"totalDowntime": 58452.91053249994,
"color": "rgb(234,234,234)",
"id": "None_Group_Id",
"parent": "Title5_Grp_Id5",
"value": 936,
"eventType": "None"
}, {
"name": "Error",
"fqn": "MySelFqn.Title5",
"totalEventCount": 277,
"totalDowntime": 25.760000000000015,
"color": "rgb(0,204,0)",
"id": "Error_Group_Id",
"parent": "Title5_Grp_Id5",
"value": 277,
"eventType": "Error"
}, {
"name": "Standby",
"fqn": "MySelFqn.Title5",
"totalEventCount": 32,
"totalDowntime": 373.01999999999986,
"color": "rgb(255,191,0)",
"id": "Standby_Group_Id",
"parent": "Title5_Grp_Id5",
"value": 32,
"eventType": "Standby"
}, {
"name": "Breakdown",
"fqn": "MySelFqn.Title5",
"totalEventCount": 42,
"totalDowntime": 185.20999999999995,
"color": "rgb(178,49,25)",
"id": "Breakdown_Group_Id",
"parent": "Title5_Grp_Id5",
"value": 42,
"eventType": "Breakdown"
}, {
"id": "Title7_Grp_Id6",
"name": "Title7",
"value": 1765,
"fqn": "MySelFqn.Title7",
"levelName": "Plant",
"path": "Title7"
}, {
"name": "None",
"fqn": "MySelFqn.Title7",
"totalEventCount": 1219,
"totalDowntime": 64004.68101777776,
"color": "rgb(234,234,234)",
"id": "None_Group_Id",
"parent": "Title7_Grp_Id6",
"value": 1219,
"eventType": "None"
}, {
"name": "Error",
"fqn": "MySelFqn.Title7",
"totalEventCount": 411,
"totalDowntime": 52.79000000000006,
"color": "rgb(0,204,0)",
"id": "Error_Group_Id",
"parent": "Title7_Grp_Id6",
"value": 411,
"eventType": "Error"
}, {
"name": "Breakdown",
"fqn": "MySelFqn.Title7",
"totalEventCount": 44,
"totalDowntime": 3863.4999999999995,
"color": "rgb(178,49,25)",
"id": "Breakdown_Group_Id",
"parent": "Title7_Grp_Id6",
"value": 44,
"eventType": "Breakdown"
}, {
"name": "Standby",
"fqn": "MySelFqn.Title7",
"totalEventCount": 86,
"totalDowntime": 13847.970000000003,
"color": "rgb(255,191,0)",
"id": "Standby_Group_Id",
"parent": "Title7_Grp_Id6",
"value": 86,
"eventType": "Standby"
}, {
"name": "Planned",
"fqn": "MySelFqn.Title7",
"totalEventCount": 5,
"totalDowntime": 86.52999999999998,
"color": "rgb(51,51,255)",
"id": "Planned_Group_Id",
"parent": "Title7_Grp_Id6",
"value": 5,
"eventType": "Planned"
}]
$('#container').highcharts({
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
allowDrillToNode: true,
levelIsConstant: false,
levels: [{
level: 1,
dataLabels: {
enabled: true,
//align: 'left',
//verticalAlign: 'top',
//color: 'rgba(255, 0, 0, 1)',
shadow: false,
//color: "rgb(255, 255, 255)",
style: {
fontSize: '15px',
color:'red'
//fontWeight: 'bold',
//opacity:1
//zIndex: 99999
},
},
borderWidth: 5
}, {
level: 2,
dataLabels: {
//useHTML: true, //enabling this changes this behaviour
enabled: true,
shadow: false,
color: "rgb(255, 255, 255)"
},
borderWidth: 5
}],
data: data
}]
});
}）;
答案 0 :(得分：0)
正在使用默认的dataLabels碰撞检测逻辑，并且将隐藏彼此重叠的lebels。似乎在IE11中，由于浏览器的不同，不同的dataLabel会隐藏在Chrome中。请参阅JSFiddle，allowOverlap设置为true，以注意标签彼此重叠：http://jsfiddle.net/jgnktcvr/
当您在第二级dataLabels中设置useHTML: true时，标签的大小将会改变，在这种情况下，两个图表看起来都是一样的。
解决方案可能是为每个点或重要的点设置labelrank，这样就可以控制在重叠时隐藏哪些标签。
JSFiddle：http://jsfiddle.net/zgqr0ozv/5/
其他选项可能是编写自定义碰撞检测逻辑，该逻辑将覆盖默认值。