Highcharts - 树形图矩形显示下一个级别

Question

我正在使用Highcharts Treemap，我想阻止在树形图的每个级别显示下一个级别。

我希望树形图上的每个对象都只有一种颜色。

这是我的代码：

                      Highcharts.chart('myChart', {
                        tooltip: {
                            backgroundColor: 'black',
                            style: {
                                "color": "white",
                                "font": "Roboto"
                            },
                            borderColor: 'black',
                            borderRadius: 5,                               
                        },
                        colorAxis: {
                            minColor: '#ffcfab', 
                            maxColor: '#ff5e43' //'#FF5E43',

                        },
                        legend: {
                            enabled: false
                        },
                        series: [{
                            type: 'treemap',
                            layoutAlgorithm: 'squarified',
                            allowDrillToNode: true,
                            animationLimit: 1000,
                            dataLabels: {
                                enabled: false
                            },
                            levelIsConstant: false,
                            levels: [{
                                level: 1,
                                dataLabels: {
                                    enabled: true
                                },
                                borderWidth: 3
                            }],

                            data: result
                        }],
                        title: {
                            text: 'All Data Sources',
                            margin: 1,
                            style: {
                                font: 'Roboto Condensed,sans-serif',
                                fontSize: '24px',
                                fontFamily: 'Roboto Condensed',
                                fontWeight: 700,
                                display: 'block',
                            }
                        }
                    })

提前致谢。

Answer 1

为系列设置opacity到0似乎正在解决您的问题。

演示：http://jsfiddle.net/qa2czu8y/

$(function() {


  Highcharts.chart('container', {
    title: {
      text: 'All Data Sources',
      margin: 1,
      style: {
        font: 'Roboto Condensed,sans-serif',
        fontSize: '24px',
        fontFamily: 'Roboto Condensed',
        fontWeight: 700,
        display: 'block',
      }
    },
    series: [{
      type: 'treemap',
      layoutAlgorithm: 'squarified',
      allowDrillToNode: true,
      animationLimit: 1000,
      dataLabels: {
        enabled: false
      },
      levelIsConstant: false,
      levels: [{
        level: 1,
        dataLabels: {
          enabled: true
        },
        borderWidth: 3,
      }],
      
      opacity: 0,
      
      data: [{
        id: 'A',
        name: 'Apples'
      }, {
        id: 'B',
        name: 'Bananas'
      }, {
        id: 'O',
        name: 'Oranges'
      }, {
        name: 'Anne',
        parent: 'A',
        value: 5,
        colorValue: 5
      }, {
        name: 'Rick',
        parent: 'A',
        value: 3,
        colorValue: 3
      }, {
        name: 'Peter',
        parent: 'A',
        value: 4,
        colorValue: 4
      }, {
        name: 'Anne',
        parent: 'B',
        value: 4,
        colorValue: 4
      }, {
        name: 'Rick',
        parent: 'B',
        value: 10,
        colorValue: 10
      }, {
        name: 'Peter',
        parent: 'B',
        value: 1,
        colorValue: 1
      }, {
        name: 'Anne',
        parent: 'O',
        value: 1,
        colorValue: 1
      }, {
        name: 'Rick',
        parent: 'O',
        value: 3,
        colorValue: 3
      }, {
        name: 'Peter',
        parent: 'O',
        value: 3,
        colorValue: 3
      }, {
        name: 'Susanne',
        parent: 'Kiwi',
        value: 2,
        colorValue: 2
      }]
    }],
    tooltip: {
      backgroundColor: 'black',
      style: {
        "color": "white",
        "font": "Roboto"
      },
      borderColor: 'black',
      borderRadius: 5
    },
    colorAxis: {
      minColor: '#ffcfab',
      maxColor: '#ff5e43' //'#FF5E43',

    },
    legend: {
      enabled: false
    },
  });
});

#container {
  min-width: 300px;
  max-width: 600px;
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<div id="container"></div>