ng4-charts 是一个基于 Chart.js 的可复用 Angular 组件库，用于在 Angular 应用程序中快速创建美观的图表和可视化效果。本教程将介绍如何安装和使用 ng4-charts。
安装 ng4-charts
安装 ng4-charts 可以使用 npm 包管理器：
npm install ng2-charts chart.js --save
导入模块
要使用 ng4-charts，需要在 app.module.ts 中导入它：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ----------- - ---- -----------------
------ - ---------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ------------ - ---- -------------
-----------
------------- -
------------
--
-------- -
--------------
------------
-----------
------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -创建图表组件
在创建组件前，需要在组件中引入图表类型及其数据：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------- - ---- -------------
------ - -------------- ------------ - ---- -----------
------------
--------- ------------
--------- -
---- --------------- -------
------- ---------
--------------------------
--------------------------
----------------------------
--------------------------
--------------------------
---------------------------
-----------------------------------
---------------------------------------------
------
-
--
------ ----- -------------- -
------ -------------- --------------- - -
- ----- ---- --- --- --- --- ---- ------ ----- --
- ----- ---- --- --- --- --- ---- ------ ----- -
--
------ ---------------- -------- - ------ ----- ----- ----- ----- ------
------ ----------------- ------------- - - ----------- --- -- - -
----------- -----
------- -
-- --------
------ --
------ -
------------ ----
-
--
-
--
------ ---------------- ---------- - -
- -- -
---------------- -----------------------
------------ ---------------------
--------------------- ---------------------
----------------- -------
-------------------------- -------
---------------------- ----------------------
--
- -- -
---------------- --------- ---- ----------
------------ --------- ---- --------
--------------------- --------- ---- --------
----------------- -------
-------------------------- -------
---------------------- --------- ---- ---------
-
--
------ --------------- - -----
------ -------------- --------- - -------
------ -------------- ------ ------ -- - ------ ----------- ------- ---- --- ---- -
------------------ --------
-
------ -------------- ------ ------ -- - ------ ----------- ------- ---- --- ---- -
------------------ --------
-
-显示图表
要在模板中显示图表，只需将组件放在 app.component.html 中：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------- - ---- -------------
------ - -------------- ------------ - ---- -----------
------------
--------- -----------
--------- -
---- ---------- ---- -----
-----------------------
-
--
------ ----- ------------ - -现在，您可以运行您的 Angular 应用程序，并在浏览器中看到一个带有标签的折线图。
总结
以上是一个简单的使用 ng4-charts 创建图表的教程。这样的组件库可以大幅提高开发效率，节省大量开发时间。希望这个教程对初学者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005700981e8991b448e7cb2