如何在 Angular 中使用 ng2-charts 来使用 Chart.js

介绍

Chart.js 是一个流行的 JavaScript 图表库，ng2-charts 是 Angular 2+ 的一个包装器，用于在 Angular 中集成 Chart.js。

在本教程中，您将使用 Chart.js 和 ng2-charts 在 Angular 应用程序中创建示例图表。

先决条件

要完成本教程，您需要：

• 本地安装了 Node.js，您可以按照《如何安装 Node.js 并创建本地开发环境》中的步骤进行安装。
• 对设置 Angular 项目和使用 Angular 组件有一定的了解可能会有所帮助。

本教程已使用 Node v14.13.1、npm v6.14.8、angular v10.1.6、chart.js v2.9.4 和 ng2-charts v2.4.2 进行验证。

步骤 1 —— 设置项目

您可以使用 @angular/cli 创建一个新的 Angular 项目。

在您的终端窗口中，使用以下命令：

npx @angular/cli new angular-chartjs-example --style=css --routing=false --skip-tests
复制

这将配置一个新的 Angular 项目，样式设置为 “CSS”（而不是 “Sass”、“Less” 或 “Stylus”），没有路由，并跳过测试。

转到新创建的项目目录：

cd angular-chartjs-example
复制

从项目文件夹中运行以下命令以安装 chart.js：

npm install chart.js@2.9.4 ng2-charts@2.4.2
复制

接下来，通过打开您的代码编辑器并修改 angular.json 来将 chart.js 添加到您的 Angular 应用程序中，以包括 Chart.min.js：

 
{
  // ...
  "projects": {
    "angular-chartjs-example": {
      // ...
      "architect": {
        "build": {
          // ...
          "options": {
            // ...
            "scripts": [
              "node_modules/chart.js/dist/Chart.min.js"
            ],
            "allowedCommonJsDependencies": [
              "chart.js"
            ]
          },
          // ...
        },
      }
    }},
  // ...
}复制

然后，打开 app.module.ts 并修改它以导入 ChartsModule：

 
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ChartsModule } from 'ng2-charts';
 
import { AppComponent } from './app.component';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ChartsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }复制

有了这个基本结构，您可以开始创建图表组件。

步骤 2 —— 创建图表组件

让我们从一个示例开始，该示例使用一些选项作为输入来绘制与四个月内三个不同账户相关联的值。

ng2-charts 为您提供了一个 baseChart 指令，可以应用于 HTML canvas 元素。

在代码编辑器中打开 app.component.html 并用以下代码替换内容：

 
<div style="width: 40%;">
  <canvas
    baseChart
  >
  </canvas>
</div>复制

然后，修改 canvas 以传入 chartType 和 legend：

 
<div style="width: 40%;">
  <canvas
    ...
    [chartType]="'line'"
    [legend]="true"
  >
  </canvas>
</div>复制

• chartType：这设置了图表的基本类型。值可以是 pie、doughnut、bar、line、polarArea、radar 或 horizontalBar。
• legend：一个布尔值，用于指定是否应在图表上方显示图例。

然后，修改 canvas 以传入 datasets：

 
<div style="width: 40%;">
  <canvas
    ...
    [datasets]="chartData"
  >
  </canvas>
</div>复制

接下来，在代码编辑器中打开 app.component.ts 来定义模板中引用的数组：

 
// ...
export class AppComponent {
  // ...
 
  chartData = [
    {
      data: [330, 600, 260, 700],
      label: 'Account A'
    },
    {
      data: [120, 455, 100, 340],
      label: 'Account B'
    },
    {
      data: [45, 67, 800, 500],
      label: 'Account C'
    }
  ];
}复制

• datasets：这应该是一个包含数据数组和每个数据集的标签的对象数组。
• data：或者，如果您的图表很简单，只有一个数据集，您可以使用 data 而不是 datasets，并传入一个数据点数组。

现在，重新打开 app.component.html 并修改 canvas 以传入 labels：

 
<div style="width: 40%;">
  <canvas
    ...
    ="chartLabels"
  >
  </canvas>
</div>复制

接下来，再次在代码编辑器中打开 app.component.ts 来定义模板中引用的数组：

 
// ...
export class AppComponent {
  // ...
 
  chartLabels = [
    'January',
    'February',
    'March',
    'April'
  ];
}复制

• labels：X 轴的标签数组。

现在，重新打开 app.component.html 并修改 canvas 以传入 options：

 
<div style="width: 40%;">
  <canvas
    ...
    [options]="chartOptions"
  >
  </canvas>
</div>复制

接下来，再次在代码编辑器中打开 app.component.ts 来定义模板中引用的对象：

 
// ...
export class AppComponent {
  // ...
 
  chartOptions = {
    responsive: true
  };
}复制

• options：一个包含图表选项的对象。您可以参考官方 Chart.js 文档了解可用选项的详细信息。

重新编译您的应用程序：

npm start
复制

当在 Web 浏览器中访问您的应用程序（通常是 localhost:4200）时，您将看到一个图表，其中绘制了 Account A、Account B 和 Account C 在 April、February、March、April 月份的数据：

!示例图表与 ng2-chart

Chart.js 还提供了官方文档中介绍的其他属性和选项。

第三步 — 处理 chartClick 和 chartHover 事件

两个事件被触发，分别是 chartClick 和 chartHover，它们提供了一种方式来响应用户与图表的交互。当前活动的点和标签将作为事件数据的一部分返回。

让我们创建一个示例，将它们添加到画布中。

打开 app.component.html 并添加 chartHover 和 chartClick：

<div style="width: 40%;">
  <canvas
    ...
    (chartHover)="onChartHover(($event)"
    (chartClick)="onChartClick(($event)"
  >
  </canvas>
</div>复制

打开 app.component.ts 并添加你在模板中引用的自定义函数：

// ...
export class AppComponent {
  // ...
 
  onChartHover = ($event: any) => {
    window.console.log('onChartHover', $event);
  };
 
  onChartClick = ($event: any) => {
    window.console.log('onChartClick', $event);
  };
}复制

重新编译你的应用程序后，你将在开发者工具中观察到 onChartHover 和 onChartClick 被记录。

第四步 — 动态更新数据集

使用 Chart.js 的一个亮点是能够动态更新或响应从后端或用户输入接收到的数据。

让我们继续基于前面的示例，在 4 个月内绘制 3 个账户值，并为五月份添加新的数据点。

打开 app.component.ts 并定义自定义函数：

// ...
export class AppComponent {
  // ...
 
  newDataPoint(dataArr = [100, 100, 100], label) {
    this.chartData.forEach((dataset, index) => {
      this.chartData[index] = Object.assign({}, this.chartData[index], {
        data: [...this.chartData[index].data, dataArr[index]]
      });
    });
 
    this.chartLabels = [...this.chartLabels, label];
  }
}复制

如果没有传递数组给 newDataPoint()，则默认值为 [100, 100, 100]。

在数据集数组上也没有进行 mutation。使用 Object.assign 返回包含先前数据和新数据的新对象。

然后，在 app.component.html 中，在 canvas 后使用自定义函数在一个 button 中：

<div style="width: 40%;">
  ...
 
  <button (click)="newDataPoint([900, 50, 300], 'May')">
    添加数据点
  </button>
</div>复制

重新编译你的应用程序后，当你与 添加数据点 按钮交互时，你将观察到图表将为 五月 月份绘制 A 账户、B 账户、C 账户 的值。

结论

在本教程中，你使用了 Chart.js 和 ng2-charts 在 Angular 应用程序中创建了一个示例图表。

这些库共同为你提供了以现代和动态的方式呈现数据的能力。