Gráficos angulares de Google: gráfico combinado

El gráfico de combinación ayuda a representar cada serie como un tipo de marcador diferente de la siguiente lista: línea, área, barras, velas y área escalonada. Para asignar un tipo de marcador predeterminado para la serie, use la propiedad seriesType. La propiedad de la serie se utilizará para especificar las propiedades de cada serie individualmente. A continuación se muestra un ejemplo de un gráfico de columnas que muestra las diferencias.

Ya hemos visto las configuraciones utilizadas para dibujar un gráfico en el capítulo Sintaxis de configuración de Google Charts . Ahora, veamos un ejemplo de un gráfico de columnas que muestra diferencias.

Configuraciones

Hemos usado ComboChart clase para mostrar una tabla combinada.

type='ComboChart';

Ejemplo

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

Resultado

Verifica el resultado.