Angular 是一种基于 TypeScript 的 Web 应用程序框架，用于构建动态 Web 应用程序。Angular 不仅提供了强大的模块化、依赖注入和组件化等特性，还包含了丰富的可复用工具和库。本文将介绍如何使用 Angular 和一些广泛使用的图表库绘制图表，让你的 Web 应用程序更加丰富和可视化。
安装 Angular
首先，在安装和使用 Angular 之前，你需要确保你的计算机上已安装了 Node.js。Node.js 是一个开源、跨平台的 JavaScript 运行环境，可用于编写服务器端 JavaScript 应用程序和 Web 应用程序的构建。打开终端或命令行提示符，检查 Node.js 是否已正确安装。
node -v
如果输出 Node.js 的版本号，则表示已正常安装。
接下来，你需要使用 npm（Node Package Manager）安装 Angular CLI（命令行界面）。Angular CLI 是一个用于创建、构建、测试和部署 Angular 应用程序的工具。
npm install -g @angular/cli
这条命令将全局安装 Angular CLI。安装完成后，你可以使用以下命令创建一个新的 Angular 应用程序：
ng new my-app
这个命令会在当前目录下创建一个名为 my-app 的新应用程序。安装完成后，进入应用程序目录并启动开发服务器。
cd my-app ng serve --open
这个命令将启动开发服务器并打开浏览器窗口，访问 http://localhost:4200/，你将看到一个欢迎页面，表示安装和启动成功了。
添加图表库
既然你已经成功创建了 Angular 应用程序，下一步是添加一个适用于 Angular 的图表库。本文使用的图表库是 ngx-charts。ngx-charts 是一个基于 D3.js 的 Angular 图表库，提供多种图表类型，包括柱状图、折线图、散点图、饼图等。
首先，你需要使用 npm 安装 ngx-charts。
npm install @swimlane/ngx-charts --save
这个命令将 ngx-charts 添加到你的项目依赖中，并将包保存到 node_modules 目录下。
然后，你需要在 Angular 应用程序中导入所需的库。打开 src/app/app.module.ts 文件，并添加以下代码：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------------------- - ---- ---------------------------------------
------ - --------------- - ---- -----------------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
------------------------
---------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -这个代码将导入 @swimlane/ngx-charts 中的 NgxChartsModule，并将其添加到 app.module.ts 文件中的 imports 数组中。请注意，你还需要将 BrowserAnimationsModule 导入到 app.module.ts 中，以便 ngx-charts 中的动画效果可用。
绘制柱状图
现在，让我们来绘制第一个图表，一个简单的柱状图。首先，在 src/app 中创建一个名为 bar-chart.component.ts 的新组件，并添加以下代码。
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------------
--------- ----------------
--------- -
------------------------
-------------
----------------------
---------------------
---------------
------------------------
--------------
--------------
-----------------------
----------------------
------------------
-----------------------
---------------------
---------------------
-------------------------
----------------------------
--------------------------
-
--
------ ----- ----------------- ---------- ------ -
----- ----- - ----- -----
--------- - -
- ----- ---- ------ -- --
- ----- ---- ------ -- --
- ----- ---- ------ -- --
- ----- ---- ------ -- -
--
----------- - -
------- ----------- ---------- ---------- ----------
--
---- - ----
------------- - -
----------- ---- -
-
--------------- ---- -
-------------------
-
-这个代码将创建名为 BarChartComponent 的新组件，并使用 NgxChartsBarVertical 组件绘制一个垂直的柱状图。我们可以看到，在组件中定义了一些属性，包括 view、chartData、colorScheme、yMax 等等。这些属性将用于指定图表的样式和数据。
接下来，在 app.component.ts 中导入 BarChartComponent，并将其添加到 app.component.html 中。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------------- - ---- ----------------------------------
------------
--------- -----------
--------- -
---- --------------------------
----
------- -- -- ----- ---
-----
------
-----
------- ----------
-------------------------------
------
--
---------- -----------------------
--
------ ----- ------------ -
----- - ------------------
-这个代码会在应用程序中显示一个简单的柱状图，它将显示在 app.component.html 中。
总结
本文介绍了如何使用 Angular 和 ngx-charts 绘制图表。你已经学会了如何安装 Angular 和 ngx-charts，并使用 ngx-charts-bar-vertical 组件绘制了一个简单的柱状图。希望这篇文章能够帮助你快速入门，并开始在你的应用程序中使用图表。如果你想继续学习，可以探索 ngx-charts 的其他组件和功能，例如折线图、散点图、饼图等等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648a73c048841e9894895e04