Angular-highcharts-tree-map

Angular Highcharts-ツリーマップチャート

以下は、ツリーマップチャートの例です。

link：/angular_highcharts/angular_highcharts_configuration_syntax [Highcharts構成構文]の章で、チャートを描画するために使用される構成をすでに確認しました。

ツリーマップチャートの例を以下に示します。

構成

ここで、追加の構成/実行された手順を見てみましょう。

シリーズ

チャートタイプを「ツリーマップ」ベースに設定します。 series.type は、チャートのシリーズタイプを決定します。 ここで、デフォルト値は「line」です。

series : [{type: "treemap"}]

例

*_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.componentl',
   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
         }
         ]
      }]
   };
}

結果

結果を確認します。

ツリーマップチャート