在 Web 应用开发中，图表展示是非常重要的一项功能。在 Angular 中，有很多优秀的图表库可供选择，如 ngx-charts、angular-highcharts、ng2-charts 等等。本文将介绍怎样使用 ngx-charts 在 Angular 中实现图表展示。
安装 ngx-charts
安装 ngx-charts 很简单，只需在命令行中运行以下命令即可：
npm install @swimlane/ngx-charts --save
使用 ngx-charts
在使用 ngx-charts 之前，我们需要先在项目中引入它。在 app.module.ts 文件中，加入以下代码：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - --------------- - ---- -----------------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
---------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -这样 ngx-charts 就已经可以在我们的项目中使用了。
实现柱状图
接下来我们将实现一个简单的柱状图。在 app.component.ts 中加入以下代码：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------ - ---- ---------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ ---------- ------ -
------- ------
----- ----- - ----- -----
-- ------- --- --- -----
--------- - -----
--------- - -----
-------- - ------
---------- - -----
----------- - ---
-------------- - --------
----------- - -
------- ----------- ---------- ----------
--
------------- -
------------------- - ------ ---
-
---------- -
-
--------------- -
-------------------
-
-在 app.component.ts 中，我们定义了一个 single 数组，它是我们用来填充柱状图数据的数组。同时，我们定义了一个 view 数组，它定义了图表的宽度和高度。我们还定义了一些选项，如是否显示坐标轴、是否显示图例等。
在 app.component.html 中，加入以下代码：
-- -------------------- ---- ------- -------------------------- ------------- ---------------------- ------------------ --------------------- ------------------- ------------------- ------------------------- --------------------------- --------------------------------- ---------------------------- ----------------------------
这样，我们就完成了一个简单的柱状图的实现。现在我们可以在浏览器中看到一个有着三根柱子的柱状图了。
总结
ngx-charts 是一个非常实用的 Angular 图表库。通过本文的学习，我们可以知道如何在 Angular 中使用 ngx-charts 实现柱状图。这对我们在项目中展示数据将会起到很大的帮助作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c4b87883d39b4881827195