highcharts treemap heatmap level2颜色变黑

时间:2015-03-16 07:19:35

标签: highcharts heatmap treemap

您好Highchart Heatmap有问题。进入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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:2)

正如您可能已经看到的那样,GitHub问题已得到修复和关闭。 使用4.1.6或更高版本的Treemap版本,您不应该遇到此问题。

或者,可以在加载Highcharts之后和创建图表之前添加以下代码段:

Highcharts.seriesTypes.treemap.prototype.getExtremesFromAll = true;