Angular Google Charts - Combination Chart

Wykres złożony pomaga w renderowaniu każdej serii jako innego typu znacznika z następującej listy: linia, obszar, słupki, świece i obszar schodkowy. Aby przypisać domyślny typ znacznika do serii, użyj właściwości seriesType. Właściwość serii służy do indywidualnego określania właściwości każdej serii. Poniżej znajduje się przykład wykresu kolumnowego pokazującego różnice.

Widzieliśmy już konfiguracje używane do rysowania wykresów w rozdziale Składnia konfiguracji wykresów Google . Spójrzmy teraz na przykład wykresu kolumnowego pokazującego różnice.

Konfiguracje

Użyliśmy ComboChart klasy, aby wyświetlić wykres kombinacji.

type='ComboChart';

Przykład

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

Wynik

Sprawdź wynik.