Angular Google Charts - Kombinasyon Grafiği

Kombinasyon grafiği, her seriyi aşağıdaki listeden farklı bir işaretçi türü olarak oluşturmaya yardımcı olur: çizgi, alan, çubuklar, şamdanlar ve kademeli alan. Seriler için varsayılan bir işaretleyici türü atamak için seriesType özelliğini kullanın. Seri özelliği, her serinin özelliklerini ayrı ayrı belirtmek için kullanılacaktır. Aşağıda, farklılıkları gösteren bir Sütun Grafiği örneği verilmiştir.

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, farklılıkları gösteren bir Sütun Grafiği örneğini görelim.

Konfigürasyonlar

Kullandık ComboChart Kombinasyon Grafiğini göstermek için sınıf.

type='ComboChart';

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 = 'Fruits distribution';
   type = 'ComboChart';
   data = [
      ["Apples", 3, 2, 2.5],
      ["Oranges",2, 3, 2.5],
      ["Pears", 1, 5, 3],
      ["Bananas", 3, 9, 6],
      ["Plums", 4, 2, 3]
   ];
   columnNames = ['Fruits', 'Jane','Jone','Average'];
   options = {   
      hAxis: {
         title: 'Person'
      },
      vAxis:{
         title: 'Fruits'
      },
      seriesType: 'bars',
      series: {2: {type: 'line'}}
   };
   width = 550;
   height = 400;
}

Sonuç

Sonucu doğrulayın.