Angular Google Charts - Organizasyon Şemaları

Aşağıda bir Organizasyon Şeması örneği verilmiştir.

Organizasyon şeması, bir organizasyondaki üst / alt ilişkileri tasvir etmek için kullanılan bir düğüm hiyerarşisi oluşturmaya yardımcı olur. Örneğin, Aile ağacı, bir kuruluş şeması türüdür. Google Grafik Yapılandırma Sözdizimi bölümünde bir grafik çizmek için kullanılan yapılandırmaları daha önce görmüştük . Şimdi bir Organizasyon Şeması örneğini görelim.

Konfigürasyonlar

Kullandık OrgChart Organizasyon Şemasını göstermek için sınıf.

type='OrgChart';

Misal

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 = 'OrgChart';
   data = [
      [{v:'Mike', f:'Mike<div style="color:red; font-style:italic">President</div>'},
         '', 'The President'],
      [{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'},
         'Mike', 'VP'],
      ['Alice', 'Mike', ''],
      ['Bob', 'Jim', 'Bob Sponge'],
      ['Carol', 'Bob', '']
   ];
   columnNames = ["Name","Manager","Tooltip"];
   options = {   
      allowHtml: true
   };
   width = 550;
   height = 400;
}

Sonuç

Sonucu doğrulayın.