Google Charts - TreeMap Charts

TreeMap adalah representasi visual dari pohon data, di mana setiap node dapat memiliki nol atau lebih anak, dan satu orang tua (kecuali untuk root). Setiap node ditampilkan dalam bentuk persegi panjang, dapat berukuran dan diwarnai sesuai dengan nilai yang kita tetapkan. Ukuran dan warna dinilai relatif terhadap semua node lain dalam grafik. Berikut adalah contoh bagan peta hierarki. Kita telah melihat konfigurasi yang digunakan untuk menggambar diagram ini di bab Sintaks Konfigurasi Diagram Google . Jadi, mari kita lihat contoh lengkapnya.

Konfigurasi

Kami telah menggunakan TreeMap kelas untuk menunjukkan diagram peta hierarki.

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

Contoh

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>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = new google.visualization.DataTable();
            var data = google.visualization.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],
               ['Australia', '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.visualization.TreeMap(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

Hasil

Verifikasi hasilnya.