注册
> 资源中心>博客资讯>编程开发

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

WBOLT_COM 4 月 07, 2023 500 0

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

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

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

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

先决条件

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

    • HTML
    • JavaScript
    • TypeScript
  • npm

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

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

Step 1: 安装NPM（Node Package Manager）

要安装npm，你需要下载Node.js。这可以通过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版本

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版本

Chart.js版本

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

import Chart from 'chart.js/auto';

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

chart: any = []

导航到chart.js文档的入门页面，抓取带有静态数据的模板代码，并将其粘贴到 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网站

Coinranking网站

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

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

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

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

Coinranking 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链接是一个NodeJS代理，它在被代理的请求中添加了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的数据

控制台上显示的来自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上克隆这个repo。

评论收藏微海报
分享
分享到

相关推荐

评论留言

热门主题

热门插件

  • 先决条件
  • 如何安装和创建Angular应用程序
  • Step 1: 安装NPM（Node Package Manager）
  • Step 2: 安装Angular CLI（命令行界面）
  • Step 3: 创建一个新的Angular项目
  • 如何在Angular中整合Chart.js
  • 如何整合REST API
  • 如何在图表中显示数据
  • 小结