Grafici Google angolari - Grafico a combinazione

Il grafico a combinazione aiuta a rendere ogni serie come un diverso tipo di marcatore dall'elenco seguente: linea, area, barre, candelabri e area a gradini. Per assegnare un tipo di indicatore predefinito per le serie, utilizzare la proprietà seriesType. La proprietà della serie deve essere utilizzata per specificare le proprietà di ciascuna serie individualmente. Di seguito è riportato un esempio di un istogramma che mostra le differenze.

Abbiamo già visto le configurazioni utilizzate per disegnare un grafico nel capitolo Sintassi della configurazione di Google Charts . Ora, vediamo un esempio di un istogramma che mostra le differenze.

Configurazioni

Noi abbiamo usato ComboChart class per mostrare un diagramma di combinazione.

type='ComboChart';

Esempio

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

Risultato

Verifica il risultato.