Highcharts angulares - Gráfico de mapa de árbol

A continuación se muestra un ejemplo de un gráfico de mapa de árbol.

Ya hemos visto la configuración utilizada para dibujar un gráfico en el capítulo Sintaxis de configuración de Highcharts .

A continuación se ofrece un ejemplo de un gráfico de mapa de árbol.

Configuraciones

Veamos ahora las configuraciones / pasos adicionales realizados.

serie

Configure el tipo de gráfico para que se base en un "mapa de árbol". series.typedecide el tipo de serie del gráfico. Aquí, el valor predeterminado es "línea".

series : [{type: "treemap"}]

Ejemplo

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

Resultado

Verifique el resultado.