Highcharts - 分级树形图

上一个
下一个

我们在 Highcharts 配置语法 章节中已经看到用于绘制图表所需的配置。

下面给出了带有级别的树形图示例。

配置

下面我们了解一下所执行的附加配置/步骤。

series.type

将系列类型配置为基于树形图。将类型设置为 “treemap”。

var series = {
   type: 'treemap'
};

示例

highcharts_tree_levels.htm

实时演示 
<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script>    
      <script src = "https://code.highcharts.com/modules/treemap.js"></script>    
      <script src = "https://code.highcharts.com/modules/heatmap.js"></script>  
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
      <script language = "JavaScript">
         $(document).ready(function() {    
            var title = {
               text: 'Fruit consumption'   
            };
            var series = [{
               type: "treemap",
               layoutAlgorithm: 'stripes',
               alternateStartingDirection: true,
               
               levels: [{
                  level: 1,
                  layoutAlgorithm: 'sliceAndDice',
                  dataLabels: {
                     enabled: true,
                     align: 'left',
                     verticalAlign: 'top',
                     style: {
                        fontSize: '15px',
                        fontWeight: 'bold'
                     }
                  }
               }],
               data: [
                  {
                     id: 'A',
                     name: 'Apples',
                     color: "#EC2500"
                  }, 
                  {
                     id:'B',
                     name: 'Bananas',
                     color: "#ECE100"
                  }, 
                  {
                     id: 'O',
                     name: 'Oranges',
                     color: '#EC9800'
                  }, 
                  {
                     name: 'Anne',
                     parent: 'A',
                     value: 5
                  }, 
                  {
                     name: 'Rick',
                     parent: 'A',
                     value: 3
                  }, 
                  {
                     name: 'Peter',
                     parent: 'A',
                     value: 4
                  }, 
                  {
                     name: 'Anne',
                     parent: 'B',
                     value: 4
                  }, 
                  {
                     name: 'Rick',
                     parent: 'B',
                     value: 10
                  }, 
                  {
                     name: 'Peter',
                     parent: 'B',
                     value: 1
                  }, 
                  {
                     name: 'Anne',
                     parent: 'O',
                     value: 1
                  }, 
                  {
                     name: 'Rick',
                     parent: 'O',
                     value: 3
                  }, 
                  {
                     name: 'Peter',
                     parent: 'O',
                     value: 3
                  }, 
                  {
                     name: 'Susanne',
                     parent: 'Kiwi',
                     value: 2,
                     color: '#9EDE00'
                  }
               ]
            }];
      
            var json = {};     
            json.title = title;            
            json.series = series;       
   
            $('#container').highcharts(json);
         });
      </script>
   </body>
   
</html>

结果

验证结果。

highcharts_tree_maps.htm
打印此页
上一个
下一个
广告