Diagram Google Angular - Diagram Kombinasi

Bagan kombinasi membantu dalam menampilkan setiap rangkaian sebagai jenis penanda yang berbeda dari daftar berikut: garis, area, batang, kandil, dan area berundak. Untuk menetapkan tipe penanda default untuk seri, gunakan properti seriesType. Properti seri akan digunakan untuk menentukan properti dari setiap seri secara individual. Berikut adalah contoh Bagan Kolom yang memperlihatkan perbedaan.

Kita telah melihat konfigurasi yang digunakan untuk menggambar grafik di bab Sintaks Konfigurasi Google Charts . Sekarang, mari kita lihat contoh Bagan Kolom yang menunjukkan perbedaan.

Konfigurasi

Kami telah menggunakan ComboChart kelas untuk menunjukkan Bagan Kombinasi.

type='ComboChart';

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

Hasil

Verifikasi hasilnya.