Highcharts - 树状图

上一步
下一步

以下是带有色轴的树状图表的示例。

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

配置

现在让我们来看看采取的其他配置/步骤。

series.type

将图类型配置为基于树状图。将类型设置为“treemap”。

var series = {
   type: 'treemap'
};

示例

highcharts_tree_map.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: 'Highcharts Treemap'   
            };       
            var colorAxis = {
               minColor: '#FFFFFF',
               maxColor: Highcharts.getOptions().colors[0]
            };
            var series = [{
               type: "treemap",
               layoutAlgorithm: 'squarified',
               data: [
                  {
                     name: 'A',
                     value: 6,
                     colorValue: 1
                  }, 
                  {
                     name: 'B',
                     value: 6,
                     colorValue: 2
                  }, 
                  {
                     name: 'C',
                     value: 4,
                     colorValue: 3
                  }, 
                  {
                     name: 'D',
                     value: 3,
                     colorValue: 4
                  }, 
                  {
                     name: 'E',
                     value: 2,
                     colorValue: 5
                  }, 
                  {
                     name: 'F',
                     value: 2,
                     colorValue: 6
                  }, 
                  {
                     name: 'G',
                     value: 1,
                     colorValue: 7
                  }
               ]
            }];     
            var json = {};     
            json.title = title;          
            json.colorAxis = colorAxis;   
            json.series = series;       
   
            $('#container').highcharts(json);
         });
      </script>
   </body>
   
</html>

结果

验证结果。

highcharts_tree_maps.htm
打印页面
上一步
下一步
广告