Graphique de Sankey personnalisé

Voici un exemple de graphique SanKey personnalisé.

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 personnalisé.

Configurations

Nous avons utilisé Sankey options pour personnaliser le graphique de Sankey.

options = {
   sankey: {  
      link:{
         color:{
            stroke:'black',
            strokeWidth:1
         }
      }    
   } 
};

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]
   ];
   columnNames = ['From', 'To','Weight'];
   options = {
      sankey: {  
         link:{
            color:{
               stroke:'black',
               strokeWidth:1
            }
         }    
      } 
   };
   width = 550;
   height = 400;
}

Résultat

Vérifiez le résultat.