Angular Highcharts - Gráfico de Mapa de Árvore

A seguir está um exemplo de um gráfico de mapa de árvore.

Já vimos a configuração usada para desenhar um gráfico no capítulo Highcharts Configuration Syntax .

Um exemplo de um gráfico de mapa de árvore é fornecido abaixo.

Configurações

Vamos agora ver as configurações / etapas adicionais realizadas.

Series

Configure o tipo de gráfico para ser baseado em 'mapa de árvore'. series.typedecide o tipo de série do gráfico. Aqui, o valor padrão é "linha".

series : [{type: "treemap"}]

Exemplo

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 o resultado.