Highcharts angulaires - Graphique d'arbre

Voici un exemple de carte d'arbre.

Nous avons déjà vu la configuration utilisée pour dessiner un graphique dans le chapitre Syntaxe de configuration Highcharts .

Un exemple de carte d'arbre est donné ci-dessous.

Configurations

Voyons maintenant les configurations / étapes supplémentaires prises.

séries

Configurez le type de graphique pour qu'il soit basé sur un 'treemap'. series.typedécide du type de série du graphique. Ici, la valeur par défaut est "line".

series : [{type: "treemap"}]

Exemple

app.component.ts

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';
import * as highchartsTreemap from 'highcharts/modules/treemap';
highchartsTreemap(Highcharts);
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   highcharts = Highcharts;
   chartOptions = {         
      title : {
         text: 'Highcharts Treemap'   
      },    
      colorAxis : {               
         minColor: '#FFFFFF',
         maxColor: Highcharts.getOptions().colors[0]
      },
      series : [{
         type: "treemap",
         layoutAlgorithm: 'squarified',
         data: [
         {
            name: 'A',
            value: 6,
            colorValue: 1
         }, 
         {
            name: 'B',
            value: 6,
            colorValue: 2
         }, 
         {
            name: 'C',
            value: 4,
            colorValue: 3
         }, 
         {
            name: 'D',
            value: 3,
            colorValue: 4
         }, 
         {
            name: 'E',
            value: 2,
            colorValue: 5
         }, 
         {
            name: 'F',
            value: 2,
            colorValue: 6
         }, 
         {
            name: 'G',
            value: 1,
            colorValue: 7
         }
         ]
      }]     
   };
}

Résultat

Vérifiez le résultat.