Angular Google Charts - Baumkarte

TreeMap ist eine visuelle Darstellung eines Datenbaums, in dem jeder Knoten null oder mehr untergeordnete Elemente und ein übergeordnetes Element (mit Ausnahme des Stamms) haben kann. Jeder Knoten wird als Rechteck angezeigt und kann gemäß den von uns zugewiesenen Werten dimensioniert und gefärbt werden. Größen und Farben werden relativ zu allen anderen Knoten im Diagramm bewertet. Das folgende Beispiel zeigt ein Baumkarten-Diagramm.

Wir haben die Konfigurationen zum Zeichnen eines Diagramms bereits im Kapitel Google Charts-Konfigurationssyntax gesehen . Lassen Sie uns nun ein Beispiel für ein TreeMap-Diagramm sehen.

Konfigurationen

Wir haben verwendet TreeMap Klasse, um ein TreeMap-Diagramm anzuzeigen.

type = 'TreeMap';

Beispiel

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;
}

Ergebnis

Überprüfen Sie das Ergebnis.