Graphiques Sankey avec plusieurs niveaux

Voici un exemple de graphique SanKey avec plusieurs niveaux.

Nous avons déjà vu les configurations utilisées pour dessiner un graphique dans le chapitre Syntaxe de configuration de Google Charts . Voyons maintenant un exemple de graphique SanKey avec plusieurs niveaux.

Configurations

Nous avons utilisé Sankey classe pour afficher un graphique Sankey avec plusieurs niveaux.

type = 'Sankey';

Exemple

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = '';
   type = 'Sankey';
   data = [
      ["Brazil","Portugal",5],
      ["Brazil","France",1],
      ["Brazil","Spain",1],
      ["Brazil","England",1],
      ["Canada","Portugal",1],
      ["Canada","France",5],
      ["Canada","England",1],
      ["Mexico","Portugal",1], 
      ["Mexico","France",1],
      ["Mexico","Spain",5],
      ["Mexico","England",1], 
      ["USA","Portugal",1], 
      ["USA","France",1],
      ["USA","Spain",1],
      ["USA","England",5],
      ["Portugal","Angola",2], 
      ["Portugal","Senagal",1],
      ["Portugal","Morocco",1],
      ["Portugal","South Africa",3]
   ];
   columnNames = ['From', 'To','Weight'];
   options = {       
   };
   width = 550;
   height = 400;
}

Résultat

Vérifiez le résultat.