如何用Angular 12或更高版本集成热图图表

2022年3月1日

你可能在几何课上听说过2D或二维图形。例如，长方形、正方形和圆形都是二维图形。

除此以外，柱状图和线状图等图表也有2维。在编程中处理图表或图形时，这些概念发挥着重要作用。

本教程将教你有关热力图的一切知识。热力图是一种容易显示数据的图表类型，便于理解。

前提条件

要继续学习本教程，你需要具备以下条件。

具有Typescript或JavaScript的基本知识。
Angular的基本知识。在本教程中，我们将使用Angular 12版本。
本地开发环境已完全设置好。

教学目的

本教程向你介绍了二维图表的概念。到最后，你应该能够建立一个与热图集成的反应式Web应用程序。

设置Angular环境

在本教程中，我们将使用Angular CLI；但是，你可以自由地从头开始设置应用程序的结构。

现在，让我们首先通过运行以下命令来安装Angular CLI。

npm install -g @angular/cli

上述命令将在全球范围内安装Angular CLI的最新版本（在撰写本文时为v12）。

接下来，通过使用CLI命令继续并创建一个新的Angular应用程序，如下图所示。

ng new angular-heatmap-tutorial
cd angular-heatmap-tutorial

# start the server
ng serve

在上面的命令中，我们创建了一个新的Angular应用程序，名为angular-heatmap-tutorial。接下来，我们cd ，进入项目根目录，并启动服务器，它运行在端口4200 。

值得注意的是，Angular的默认端口是4200。如果你的环境中已经有其他应用程序在那里运行，这可能是不同的。

添加Heatmap包

Heatmap，与其他包不同，有不同的库，你可以根据你的需要来选择。

这包括：

[Ngx-heatmap]
[Angular-calendar-heatmap]
[Angular2-calendar-heatmap]
[Syncfusion-heatmap]

上面的列表并不详尽。你可以通过访问该包的网站找到更多关于该包的信息。

在本教程中，我们将使用Angular Calendar Heatmap包。

继续并通过运行以下命令安装该包。

npm install @syncfusion/ej2-angular-heatmap --save

上述命令将安装最新版本的软件包，如下图所示。

 "private": true,
  "dependencies": {

    //...
    "@syncfusion/ej2-angular-heatmap": "^19.4.52",
    //....
  },

让我们继续并配置我们的应用程序以使用这个包，如下所示。

//...
import { HeatMapModule } from '@syncfusion/ej2-angular-heatmap';
@NgModule({
  declarations: [
    //...
  ],
  imports: [
    //...
    HeatMapModule,
    //...
  ],
  //...
})
export class AppModule { }

我们在上面的脚本中从@syncfusion/ej2-angular-heatmap 包中导入HeatMapModule。然后，我们通过将其添加到imports 数组中来配置我们的应用程序来使用这个包。

在下一节，我们将创建一个Angular组件来显示热图。

热力图组件

要在Angular中创建一个组件，首先cd ，进入项目根目录并运行以下命令。

cd angular-heatmap-tutorial

ng g c heatmap

上述命令将在src/app/heatmap 目录中创建一个新的heatmap 组件。

接下来，继续并修改heatmap.component.html 文件，如下所示。

<ejs-heatmap id='heatmap-container'></ejs-heatmap>

在上面的模板中，我们已经创建了一个热图组件。接下来，我们将使用ejs-heatmap 组件来显示热图。

为了用Heatmap渲染我们的页面，让我们修改heatmap.component.ts 文件，如下所示。

import {Component, OnInit, ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'app-heatmap',
  templateUrl: './heatmap.component.html',
  styleUrls: ['./heatmap.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class HeatmapComponent implements OnInit {

  constructor() { //...}

  ngOnInit() {
    //...
  }

}

我们在上述脚本中从@angular/core 包中导入封装属性。我们将使用这个属性来禁用该组件的默认样式。

接下来，编辑app.component.html 模板，如下图所示，显示heatmap.component.html 文件的内容。

<app-heatmap></app-heatmap>

现在访问你的浏览器并导航到http://localhost:4200 。你应该看到一个像下图这样的页面。

Angular Heatmap

配置heatMap包组件

在本节中，让我们修改我们的主模块，以使用@syncfusion/ej2-angular-heatmap 包中的默认热图组件，如下图所示。

//...
import {HeatMapModule, LegendService} from '@syncfusion/ej2-angular-heatmap';
import { HeatmapComponent as CustomHeatMapComponent } from './heatmap/heatmap.component';
import {HeatMapComponent, Legend, Tooltip } from '@syncfusion/ej2-angular-heatmap';
@NgModule({
  declarations: [
    AppComponent,
    CustomHeatMapComponent,// Renaming the custom component we created earlier to prevent conflict with shipped package component.
    HeatMapComponent// this component is imported from @syncfusion/ej2-ng-heatmap
  ],
  imports: [
    BrowserModule,
    HeatMapModule,
    AppRoutingModule
  ],
  providers: [HeatMapComponent, LegendService, LegendService],
  bootstrap: [AppComponent]
})
export class AppModule { }

在上面的模块中，我们从@syncfusion/ej2-angular-heatmap ，HeatMapComponent ，@syncfusion/ej2-angular-heatmap ，CustomHeatMapComponent ，./heatmap/heatmap.component 文件中导入了HeatMapModule。

然后我们将HeatMapComponent 注入到providers 数组中。这是在应用程序中使用HeatMapComponent的必要条件。

用实际数据测试热图

现在我们已经完成了应用程序的全部配置，让我们用实际数据测试热图。

在heatmap.component.ts 文件中，我们将修改ngOnInit() 方法，如下所示。

//...
export class HeatmapComponent implements OnInit {

  import {Component, OnInit, ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'app-heatmap',
  templateUrl: './heatmap.component.html',
  styleUrls: ['./heatmap.component.css'],
  // encapsulation: ViewEncapsulation.None
})
export class HeatmapComponent implements OnInit {
  constructor() { }

  dataSource: Object[];
  xAxis: any = {
    labels: ['Kim', 'John', 'Doe', 'Frank', 'Derrick', 'Michael', 'Essy',
      'Geofrey', 'Oscar', 'Raul', 'Ben', 'Balo'],
  };
  yAxis: any = {
    labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
  };

  ngOnInit() {
    this.dataSource = [
      [63, 19, 16, 29, 44, 0],
      [83, 48, 43, 28, 26, 58],
      [89, 18, 12, 3, 66, 80],
      [3, 16, 87, 59, 69, 2],
      [6, 36, 37, 37, 88, 5],
      [31, 45, 63, 13, 3, 69],
      [46, 59, 11, 16, 3, 23],
      [35, 6, 43, 71, 95, 69],
      [50, 67, 64, 58, 88, 41],
      [15, 15, 9, 11, 78, 14],
      [15, 46, 45, 48, 12, 82],
      [64, 23, 78, 13, 86, 79]
    ];
  }

}
}

在上面的脚本中，我们已经修改了ngOnInit() 方法来加载热图的数据。我们有两个属性来配置热图。xAxis 属性用于配置x轴的标签。yAxis 属性用于配置Y轴的标签。

然后我们将dataSource 属性设置为实际数据。然后，这个数据应该在页面加载时加载到热图中，如下图所示。

HeatMap Output

接下来，重新配置app.module.ts ，删除我们传递的热图模块，因为HeatMap组件已经配置了其模块。

总结

本教程为在Angular中创建热图打下了基础。我们已经看到了如何用HeatMapComponent 来配置热图，并在我们的应用程序中使用HeatMapComponent 。

如何将热力图图表与Angular 12或更高版本结合起来