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