介绍
@fsilva1993/ng2-charts 是一个基于 Angular2+ 和 Chart.js 的图表插件，用于展示各种图表类型，包括折线图，柱状图，饼状图等等。它提供了一种简单的方式来利用 Chart.js 的功能来制作复杂的数据可视化图表。
安装和使用
使用 @fsilva1993/ng2-charts 之前，需要确保已安装 Angular Cli 并且已经创建了一个可用于 Angular 开发环境的项目。假设现在我们已经准备好了这些，下面开始安装和集成 @fsilva1993/ng2-charts。
步骤1：安装 @fsilva1993/ng2-charts
在项目的根目录下，使用以下命令进行安装：
npm install chart.js @fsilva1993/ng2-charts --save
这样将会安装 chart.js 和 @fsilva1993/ng2-charts 两个包。
步骤2：导入 @fsilva1993/ng2-charts
在你的项目中导入 ChartModule，并在 imports 数组中添加它。
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ----------------------- - ---- ---------------------------------------
------ - ------------ - ---- ------------------
------ - ----------- - ---- -------------------------
-----------
------------- ---------------
-------- --------------- ------------------------ -------------
---------- ---
---------- --------------
--
------ ----- --------- --
步骤3：使用 @fsilva1993/ng2-charts
在你的组件中，声明图表数据和配置。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------ -------------- ---------- - -
- ----- ---- --- --- --- --- --- ---- ------ ------- -- --
- ----- ---- --- --- --- --- --- ---- ------ ------- -- --
- ----- ---- --- --- -- ---- --- ---- ------ ------- --- -------- ---------- -
--
------ ---------------- ---------- - -
----------
-----------
--------
--------
------
-------
------
--
------ ----------------- --- - -
----------- -----
------- -
------ -
- --- ----------- --------- ------ --
- --- ----------- --------- -------- ----- --------- ------ - ---- ---- ---- - - -
-
-
--
------ ---------------- ---------- - -
- -- ----
---------------- ------------------------
------------ ----------------------
--------------------- ----------------------
----------------- -------
-------------------------- -------
---------------------- -----------------------
--
- -- ---- ----
---------------- ---------------------
------------ -------------------
--------------------- -------------------
----------------- -------
-------------------------- -------
---------------------- ------------------
--
- -- ---
---------------- --------------------
------------ ------
--------------------- ----------------------
----------------- -------
-------------------------- -------
---------------------- -----------------------
-
--
------ --------------- - -----
------ ------------- - -------
-在模板中添加 canvas 和参数。
-- -------------------- ---- -------
---- --------------- --------
------- ---------
--------------------------
--------------------------
----------------------------
--------------------------
--------------------------
-------------------------------------
------示例代码
可以参考下面的示例代码来跟着学习，此示例代码是一个简单的演示页面，包含了曲线和饼状图，你可以根据自己的需求将它修改成适合自己的项目。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
---- ------------- ---- ------ -------
---- --------------- --------
------- --------- ------------
--------------------------
--------------------------
----------------------------
--------------------------
--------------------------
-------------------------------------
------
------
---- ------------- ---- ------ -------
---- --------------- --------
------- --------- ------------
---------------------
-------------------------
------------------------------------
------
------
-
--
------ ----- ------------ -
------ -------------- ---------- - -
- ----- ---- --- --- --- --- --- ---- ------ ------- -- --
- ----- ---- --- --- --- --- --- ---- ------ ------- -- --
- ----- ---- --- --- -- ---- --- ---- ------ ------- --- -------- ---------- -
--
------ ---------------- ---------- - ----------- ----------- -------- -------- ------ ------- --------
------ ----------------- --- - -
----------- -----
------- -
------ -
- --- ----------- --------- ------ --
- --- ----------- --------- -------- ----- --------- ------ - ---- ---- ---- - - -
-
-
--
------ ---------------- ---------- - -
- -- ----
---------------- ------------------------
------------ ----------------------
--------------------- ----------------------
----------------- -------
-------------------------- -------
---------------------- -----------------------
--
- -- ---- ----
---------------- ---------------------
------------ -------------------
--------------------- -------------------
----------------- -------
-------------------------- -------
---------------------- ------------------
--
- -- ---
---------------- --------------------
------------ ------
--------------------- ----------------------
----------------- -------
-------------------------- -------
---------------------- -----------------------
-
--
------ --------------- - -----
------ ------------- - -------
------ --------------- -------- - ---------- ------- --------- ------- ----- --------
------ ------------- -------- - ----- ---- -----
------ ------------ - ------
-总结
@fsilva1993/ng2-charts 是一个非常强大的数据可视化工具，兼容 Angular2+ 版本，能够支持各种常规图表类型。其使用方式十分简单，将图表组件导入项目并在组件中编写数据即可。希望本文能够帮助你快速掌握 @fsilva1993/ng2-charts 的使用，并能够在实际项目中应用到它的优秀的数据可视化功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055bee81e8991b448d9930