English 中文(简体)
Google Charts Tutorial

Google Charts Useful Resources

Selected Reading

Google Charts - TreeMap Chart
  • 时间：2024-12-22

Google Charts - TreeMap Chart

Previous Page Next Page  

TreeMap is a visual representation of a data tree, where each node may have zero or more children, and one parent (except for the root). Each node is displayed as a rectangle, can be sized and colored according to values that we assign. Sizes and colors are valued relative to all other nodes in the graph. Following is an example of a treemap chart. We ve already seen the configuration used to draw this chart in Google Charts Configuration Syntax chapter. So, let s see the complete example.

Configurations

We ve used TreeMap class to show treemap diagram.

//TreeMap chart
var chart = new google.visuapzation.TreeMap(document.getElementById( container ));

Example

googlecharts_treemap.htm

<html>
   <head>
      <title>Google Charts Tutorial</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript" src = "https://www.google.com/jsapi">
      </script>
      <script type = "text/javascript">
         google.charts.load( current , {packages: [ treemap ]});     
      </script>
   </head>
   
   <body>
      <span id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </span>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = new google.visuapzation.DataTable();
            var data = google.visuapzation.arrayToDataTable([
               [ Location ,  Parent ,  Market trade volume (size) ,  Market increase/decrease (color) ],
               [ Global ,    null,                 0,                               0],
               [ America ,    Global ,             0,                               0],
               [ Europe ,     Global ,             0,                               0],
               [ Asia ,       Global ,             0,                               0],
               [ Austrapa ,  Global ,             0,                               0],
               [ Africa ,     Global ,             0,                               0],  
               
               [ USA ,        America ,            52,                              31],
               [ Mexico ,     America ,            24,                              12],
               [ Canada ,     America ,            16,                              -23],
               
               [ France ,     Europe ,             42,                              -11],
               [ Germany ,    Europe ,             31,                              -2],
               [ Sweden ,     Europe ,             22,                              -13],   
               
               [ China ,      Asia ,               36,                              4],
               [ Japan ,      Asia ,               20,                              -12],
               [ India ,      Asia ,               40,                              63],                  
               
               [ Egypt ,      Africa ,             21,                              0],          
               [ Congo ,      Africa ,             10,                              12],
               [ Zaire ,      Africa ,             8,                               10]
            ]);
            var options = {      
               minColor:  #f00 ,
               midColor:  #ddd ,
               maxColor:  #0d0 ,
               headerHeight: 15,
               fontColor:  black ,
               showScale: true
            };
                  
            // Instantiate and draw the chart.
            var chart = new google.visuapzation.TreeMap(document.getElementById( container ));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

Result

Verify the result.