Grafik Google Angular - Peta Pohon

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 grafik di bab Sintaks Konfigurasi Google Charts . Sekarang, mari kita lihat contoh Bagan Peta Pohon.

Konfigurasi

Kami telah menggunakan TreeMap kelas untuk menampilkan bagan TreeMap.

type = 'TreeMap';

Contoh

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = '';
   type='TreeMap';
   data = [
      ["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],
          
   ];
   columnNames = ["Location", "Parent","Market trade volume (size)","Market increase/decrease (color)"];
   options = { 
      minColor:"#ff7777",
      midColor:'#ffff77',
      maxColor:'#77ff77',
      headerHeight:15,
      showScale:true
   };
   width = 550;
   height = 400;
}

Hasil

Verifikasi hasilnya.