Angular Highcharts - 树状图

以下是树状图的一个示例。

我们已经在 Highcharts 配置语法 章节中看到了用于绘制图表的配置。

下面是一个树状图示例。

配置

现在让我们看看采取的其他配置/步骤。

series

将图表类型配置为基于“treemap”。**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.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
         }
         ]
      }]     
   };
}

结果

验证结果。