嗨,我对 Highchart 热图有疑问。进入第 2 级时,颜色变为黑色,所有部分都相同。当我将颜色值更改为更大的数字(如 90)时,就会发生这种情况。
这是 jsfiddle Link
在此链接中单击 A1 并查看问题
$(function() {
$('#container').highcharts({
colorAxis: {
minColor: ' #d03b53',
maxColor: '#23c874'
},
tooltip: {
backgroundColor: 'yellow',
formatter: function() {
return this.point.name + ":" + this.point.value;
}
},
series: [{
type: "treemap",
levels: [{
level: 1,
layoutAlgorithm: 'squarified',
borderRadius: 50,
borderColor: 'black',
borderWidth: 0
}, {
level: 2,
layoutAlgorithm: 'squarified',
borderRadius: 50,
borderColor: 'black',
borderWidth: 0
}],
dataLabels: {
enabled: true,
style: {
color: 'blue',
fontWeight: 'bold',
HcTextStroke: '3px rgba(255,255,255,0.5)'
}
},
allowDrillToNode: true,
data: [{
id: "id_1",
name: 'A',
value: 90,
colorValue: 90
}, {
id: "id_2",
name: 'A1',
value: 80,
parent: 'id_1',
colorValue: 80
}, {
id: "id_3",
name: 'A2',
value: 4,
parent: 'id_1',
colorValue: 4
}, {
id: "id_4",
name: 'A3',
value: 6,
parent: 'id_1',
colorValue: 6
}, {
id: "id_b1",
name: 'B',
value: 91,
colorValue: 91
}, {
id: 'id_b2',
name: 'B1',
value: 91,
parent: 'id_b1',
colorValue: 91
}, {
name: 'C',
value: 4,
colorValue: 4
}, {
name: 'D',
value: 1,
colorValue: 1
}, {
name: 'E',
value: 2,
colorValue: 2
}, {
name: 'F',
value: 2,
colorValue: 2
}, {
name: 'G',
value: 7,
colorValue: 7
}]
}],
title: {
text: 'Highcharts Treemap'
}
});
});
#container {
min-width: 300px;
max-width: 600px;
margin: 0 auto;
}
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/heatmap.js"></script>
<script src="http://code.highcharts.com/modules/treemap.js"></script>
<div id="container"></div>
最佳答案
您可能已经看到,GitHub 问题已修复并关闭。
使用4.1.6或以上版本的Treemap,应该不会有这个问题。
或者,可以在加载 Highcharts 之后和创建图表之前添加以下代码片段:
Highcharts.seriesTypes.treemap.prototype.getExtremesFromAll = true;
关于highcharts 树状图热图 level2 颜色变黑,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29071466/