ハイチャート - ツリーマップの矩形が次のレベルを示しています

Question

ハイチャートのツリーマップを使用しており、ツリーマップのすべてのレベルで次のレベルを表示しないようにしたいと思います。

私は、ツリーマップ上のすべてのオブジェクトが1つの色で表示されることを望みます。事前に

     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', 
          } 
         } 
        }) 

ありがとう：

は、ここに私のコードです。シリーズの0にopacityを設定

Answer 1

はあなたの問題を修正しているようです。

デモ：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>