嗨,我对 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/

10-16 21:45