Highcharts angolari - Grafico ad albero

Di seguito è riportato un esempio di un grafico ad albero.

Abbiamo già visto la configurazione utilizzata per disegnare un grafico nel capitolo Sintassi della configurazione di Highcharts .

Di seguito viene fornito un esempio di grafico con mappa ad albero.

Configurazioni

Vediamo ora le configurazioni / passaggi aggiuntivi effettuati.

serie

Configura il tipo di grafico in base alla "mappa ad albero". series.typedecide il tipo di serie per il grafico. Qui, il valore predefinito è "line".

series : [{type: "treemap"}]

Esempio

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

Risultato

Verifica il risultato.