如何在Angular中使用来自REST API的数据整合Chart.js？

图表是以易于理解和分析的格式直观地显示大量数据集的一个好 *** 。它们是显示两个或多个数据集之间存在的关系的好 *** 。

存在不同类型的图表，其中一些包括条形图、折线图、饼图、雷达图等。

在这篇文章中，你将利用一个名为Angular的前端框架以及一个名为的JavaScript库来显示一个名为的加密货币平台的数据。你还将利用Coinranking的API，将加密货币的列表及其价格可视化。

先决条件

要跟上本教程，请确保你熟悉下面列出的技术的基本知识：

• • HTML
  • JavaScript
  • TypeScript

• npm

如何安装和创建Angular应用程序

首先，你需要使用以下步骤安装和设置Angular：

step 1: 安装NPM（Node Package Manager）

要安装npm，你需要。这可以通过Node.js网站完成。

Node.js是一个开源的跨平台服务器环境，可以在windows、Linux、Unix、macos等系统上运行。它允许我们利用npm将Chart.js等库安装到我们的Angular应用程序中。

Step 2: 安装Angular CLI（命令行界面）

一旦Node.js安装完毕，你现在可以通过终端/命令行使用以下命令将Angular下载到你的机器中：

npm install -g @angular/cli

为了确认Angular已经被安装，你可以通过运行 ng v 命令来查看版本，这将给我们带来以下结果：

Angular CLI版本

Step 3: 创建一个新的Angular项目

现在Angular已经安装完毕，你现在可以通过在终端运行以下命令来创建一个新项目：

ng new ng-chart --routing=false --style=css
cd ng-chart
code .

通过上面的命令，我们已经用 ng new 命令创建了一个新的Angular项目，禁用了路由，并将样式格式设为CSS。

接下来，使用 cd 命令导航到项目目录，并在Visual Studio Code中打开该项目。

你不需要为这个项目生成一个新的组件。你将使用Angular CLI创建的两个默认文件  app.component.ts 和 app.component.hmtl –来渲染图表。这些文件都在你项目的 app 目录下。

app.component.html 文件包含一些你需要去掉的模板代码。Chart.js库现在可以被集成到你的应用程序中。

如何在Angular中整合Chart.js

要将chart.js库添加到Angular应用程序中，你需要在终端中运行以下命令：

npm i chart.js

为了确认chart.js已经被安装，你可以检查你的项目中的 package.json 文件。你应该在 dependencies 对象中看到chart.js的版本，如下图所示：

Chart.js版本

现在你可以在你的项目中的 app.component.ts 文件中导入chart.js库，如下图所示：

import Chart from 'chart.js/auto';

接下来，创建一个名为 chart 的变量，并将其设置为一个空数组：

chart: any = []

导航到的入门页面，抓取带有静态数据的模板代码，并将其粘贴到 ngonInit 生命周期钩子中：

注意：Angular的 ngOnInit 生命周期钩子在组件初始化后会被触发一次。也就是说，它只在Angular组件发生之一次变化检测时被调用。

export class AppComponent {
title = 'ng-chart';
chart: any = [];
constructor() {}
ngOnInit() {
this.chart = new Chart('canvas', {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [
{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1,
},
],
},
options: {
scales: {
y: {
beginAtZero: true,
},
},
},
});
}
}

在上面的代码中，在数据对象中，有一个 labels 键，它包含一个有不同值的数组。在这之下，你有一个 datasets 数组，其中包含一个对象。

在这个对象中，有一个叫做 data 的数组，里面有不同的数字值。这些值代表将在浏览器中的图表上显示的数据。

在图表显示在浏览器中之前，你还需要抓取 <canvas></canvas> html标签，并将其粘贴到  app.component.html 文件中，如下所示：

<div>
<canvas id="canvas">{{chart}}</canvas>
</div>

注意：在 app.component.html 文件中，<canvas> 标签有一个叫做 canvas 的 id 。这必须与 app.component.ts 文件中 new Chart 对象前的括号内的值相同。如果这两个名字不一样，图表将不会显示。

现在你可以通过在终端运行 ng serve --open 命令来编译和服务该项目。你应该有以下结果：

用静态数据显示图表

如何整合REST API

要整合REST API，请使用前往Coinranking网站。你应该看到一个类似这样的页面：

Coinranking网站

首先点击 “Get API Key” 按钮。你将被引导到一个页面，在那里你可以创建一个账户，并有机会获得API密钥。

复制API密钥并打开Angular项目中的 environment.ts 文件。在该对象中，创建一个名为 API_KEY 的变量，并粘贴从CoinRanking生成的API密钥，如下图所示：

export const environment = {
production: false,
API_KEY: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
};

接下来，你需要复制API来获取中的所有加密货币币。

Coinranking API文档

为了使用上面复制的API链接，你需要通过运行下面的命令创建一个Angular Service：

ng g service services/chart

随着 chart.service.ts 文件的创建，你现在可以粘贴代码，帮助我们消费REST API，如下图所示：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { environment } from 'src/environments/environment';

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json',
    'X-My-Custom-Header': `${environment.API_KEY}`,
    'access-Control-Allow-Origin': '*',
  }),
};

@Injectable({
  providedIn: 'root',
})
export class ChartService {
  private baseUrl = 'https://api.coinranking.com/v2/coins';
  private proxyUrl = 'https://cors-anywhere.herokuapp.com/';

  constructor(private http: HttpClient) {}

  cryptoData() {
    const url = `${this.proxyUrl}${this.baseUrl}`;
    return this.http.get(url, httpOptions);
  }
}

总结一下上面的代码，以下是我们所做的：

• 我们在第2行导入了 HttpClient, HttpHeaders ，以及第3行的 environment 文件。
• 在第5行和第11行之间，我们创建了一个叫做 httpOptions 的变量。 httpOptions 变量持有一个对象，其中包含上面导入的 HttpHeaders 配置。这里我们设置了content-type，将 environment 文件中的 API_KEY 变量传递到头文件中，然后将 Access-Control-Allow-Origin 设置为通配符。这意味着浏览器应该允许来自原点的请求代码。
• 在第17行，我们创建了一个名为 baseUrl 的私有变量来保存REST API，而在第28行，我们创建了一个名为 proxyUrl 的变量来保存CORS Anywhere链接。CORS Anywhere链接是一个Node *** *** ，它在被 *** 的请求中添加了CORS头信息，并有助于在这个过程中防止CORS错误。
• 在第20行，我们将 HttpClient 注入到构造函数中，这使得它可以在服务中访问。
• 最后，我们在第22行创建了一个名为 cryptoData() 的函数。在这个函数中，有一个叫做 url 的变量。我们使用url变量来追加 proxyUrl 和 baseUrl 变量来构建我们的API。此外，在 return 语句中，我们使用 get() http *** 从REST API中获取数据。

为了使 HttpClient 工作，你需要导入并注入 HttpClientModule 到 app.module.ts 文件中，可以看到如下：

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

正如上面所看到的，HttpClientModule 被导入并注入了 imports 数组中。

如何在图表中显示数据

为了在图表上显示数据，你需要前往 app.component.ts 文件并带入你的图表服务文件，如下图所示：

import { Component } from '@angular/core';
import Chart from 'chart.js/auto';
import { ChartService } from './service/chart.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'ng-chart';
  chart: any = [];
  result: any;
  coinPrice: any;
  coinName: any;

  constructor(private service: ChartService) {}

  ngOnInit() {
    this.service.cryptoData().subscribe((res) => {
      this.result = res;
      this.coinPrice = this.result.data.coins.map((coins: any) => coins.price);
      this.coinName = this.result.data.coins.map((coins: any) => coins.name);
      conSOLe.log(this.coinPrice);
      console.log(this.coinName);

      this.chart = new Chart('canvas', {
        type: 'bar',
        data: {
          labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
          datasets: [
            {
              label: '# of Votes',
              data: [12, 19, 3, 5, 2, 3],
              borderWidth: 1,
            },
          ],
        },
        options: {
          scales: {
            y: {
              beginAtZero: true,
            },
          },
        },
      });
    });
  }
}

• 如上所述，我们首先导入了图表服务，并分别在第3行和第17行将其注入到我们的组件中。
• 我们创建了三个变量，分别是 result, coinPrice, 和 coinName。这些变量将在以后的项目中用来保存数据。
• 在 ngOnInit() 生命周期钩子中，我们在第 line 20 调用了 cryptoData() 函数，该函数返回一个被订阅的观察变量。这使得我们可以从过程中的数据中返回一个响应。
• 在第21行，我们使用 this 关键字调用 result 变量，并将其设置为持有数据。
• 接下来，在第22行和第23行，我们调用了coinPrice和coinName变量，通过数据映射，并分别将硬币价格和硬币名称附加到它们身上。
• 为了在浏览器中看到数据的结果，我们使用 console.log() 函数来显示数据，如下图所示：

控制台上显示的来自CoinRanking API的数据。

最后要做的是将上图中看到的数据绘制成图表。

ngOnInit() {
    this.service.cryptoData().subscribe((res) => {
      this.result = res;
      this.coinPrice = this.result.data.coins.map((coins: any) => coins.price);
      this.coinName = this.result.data.coins.map((coins: any) => coins.name);
      console.log(this.coinPrice);
      console.log(this.coinName);

      this.chart = new Chart('canvas', {
        type: 'bar',
        data: {
          labels: this.coinName,
          datasets: [
            {
              data: this.coinPrice,
              borderColor: '#3e95cd',
              label: 'Coin Price',
              backgroundColor: 'rgba(93, 175, 89, 0.1)',
              borderWidth: 3,
            },
          ],
        },
      });
    });
  }

• 如上所示，我们首先用从CoinRanking API得到的币名替换了第12行标签中的静态数据。
• 接下来，我们将第15行的静态数据替换为从CoinRanking API中得到的价格。

现在通过运行 ng serve --open 命令编译该项目，并在浏览器中看到结果，如下图所示：

图表的最终结果

注意：你有可能在编译项目后遇到一个错误，即（FAIled to load resource: the server responded with a status of 403 (Forbidden)）。

你需要做的是点击控制台中的CORS Anywhere链接，它将在一个新的标签页中打开，上面有一个按钮，写着Request temporary access to the demo server。点击该按钮，然后刷新页面。数据现在应该反映在图表上。

小结

在本教程中，你学到了如何在Angular应用程序中安装和集成Chart.js库和REST API。如果你想访问代码库，你可以在github上。