Angular 是一种流行的 JavaScript 框架，用于构建动态的单页面应用程序。而在这些应用程序中，图表是最常见的组件之一。在本文中，我们将讨论如何将图表库集成到 Angular 应用程序中。
选择图表库
第一步是选择一个适合你的图表库。市场上有许多不同类型的图表库，包括 D3.js、chart.js、Google Charts 等。下面是一些需要考虑的因素：
类型和样式：确定你需要什么类型的图表（例如线图，柱状图，饼状图等）和它们的样式（例如颜色和字体）。
功能和交互性：有些库提供丰富的功能和高级的交互性，而其他库则提供基本的功能和简单的交互性。
易于使用：一些库比其他库提供更简单的 API，更易于初学者使用。
文档：寻找可靠的文档和示例，以便有效地使用该库。
在本教程中，我们选择了 chart.js 作为我们的图表库。
安装依赖项
在集成图表库之前，必须在 Angular 应用程序中安装它及其依赖项。要安装 chart.js 及其依赖项，请按照以下步骤操作：
打开终端并进入您的 Angular 应用程序项目。
运行以下命令安装 chart.js 和它的 TypeScript 类型：
npm install chart.js --save npm install @types/chart.js --save-dev
第一个命令会安装 chart.js 库本身，第二个命令会安装与该库一起使用的 TypeScript 类型。
在您的项目的根目录下的 angular.json 文件中，将以下两行添加到 styles 数组中：
"node_modules/chart.js/dist/Chart.min.css" "node_modules/@fortawesome/fontawesome-free/css/all.min.css"
这些 CSS 文件包含了与 chart.js 和 FontAwesome 字体的样式。
集成 chart.js
接下来，在您的 Angular 组件中引用 chart.js。您可以像引用其他任何 JavaScript 库一样，将其标准 JS 文件导入到组件。
以下是导入 chart.js 库及其 TypeScript 类型的示例代码：
import * as Chart from 'chart.js';
import 'chartjs-plugin-datalabels';
import { Label } from 'ng2-charts';您可以看到，我们导入了 chart.js 和 chartjs-plugin-datalabels 类库，并使用 ng2-charts 中的 Label 类型为我们的类型创建别名。
接下来，您需要在组件类中定义一个变量，用于存储您新创建的 chart 对象。在这个例子中，我们为饼状图定义了一个变量：
public pieChart: Chart = undefined;
您还需要设置图表数据并创建一个 chart 对象。这可以通过编写一个 initChartData() 方法，在其中定义数据和 chart 对象来完成。以下示例代码显示了如何创建一个簇状柱形图：
-- -------------------- ---- -------
------- ---------------- ---- -
----- ---- - -
------- ----------- ----------- -------- -------- ------ ------- --------
--------- -
-
---------------- ---------- --- --- ------
------------ ---------- --- --- ----
------------ --
--------------------- ---------- --- --- ------
----------------- ---------- --- --- ----
----- --------------------- -------------------- -------------------- -------------------- -------------------- -------------------- ---------------------
------ ------ --------
--
-
---------------- --------- ---- ---- ------
------------ --------- ---- ---- ----
------------ --
--------------------- --------- ---- ---- ------
----------------- --------- ---- ---- ----
----- --------------------- -------------------- -------------------- -------------------- -------------------- -------------------- ---------------------
------ ------- --------
-
-
--
----- ------- - -
------- -
------ --
------ -
------------ ----
-
--
--
-------- -
----------- -
------- ------
------ ------
----- -
----- ---
--
---------- ------- -------- -- -
------ --- - ------
-
-
-
--
------------- - --- ----------------- -
----- ------
----- -----
-------- -------
---
-如您所见，我们在 options 参数中设置了轴的缩放和 datalabels。这包括在 chartjs-plugin-datalabels 中配置 datalabels 插件，它提供了更好的数据标签处理。
最后，在组件类的 ngOnInit() 方法中调用 initChartData() 方法：
ngOnInit() {
this.initChartData();
}这将调用方法并初始化图表。
使用 ng2-charts 库
作为一个额外的步骤，您还可以使用 ng2-charts 库，这是一个 chart.js 的封装库，提供了 Angular 指令和组件，方便集成图表到 Angular 应用程序中。
为使用 ng2-charts，要按照以下步骤添加它到您的 Angular 应用程序中：
运行以下命令安装 ng2-charts 和它的依赖项：
npm install ng2-charts chart.js --save npm install @types/chart.js --save-dev
在 app.module.ts 文件中添加以下 import：
-- -------------------- ---- ------- ------ - ------------ - ---- ------------- ----------- ----- -------- - ----- ------------- ----- -- ----- --在需要使用 ng2-charts 的组件中，添加 chart 标签，如下所示：
-- -------------------- ---- ------- ---- --------------- -------- ------- ------------- ----------- ------------ ------------------------- ------------------------- --------------------------- ------------------------- --------------------------- ------------------------------------ ------您可以看到我们使用 Angular 绑定，将数据和选项与 chart 标签绑定在一起。
总结
在本文中，我们讨论了如何将 chart.js 图表库集成到 Angular 应用程序中。我们先选择了一个库，然后安装了所需的依赖项和样式，接着定义了图表数据和变量，并创建了一个 chart 对象。最后，我们还讨论了如何使用 ng2-charts 库，这是一个实用的 Angular 封装库。
无论您选择何种库，您都可以使用上述步骤集成任何其他可用的 JavaScript 图表库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645516bd968c7c53b08c12f7