简介
Angular2-charts 是一个通过绑定属性进行配置和使用的简单图表库。它可以很方便地集成到 Angular2 应用程序中，并且可以支持许多不同类型的图表。
本文将介绍如何在 Angular2 应用程序中使用 angular2-charts。
安装
通过 npm 安装 angular2-charts：
--- ------- ------ ---------------
然后，在你的模块中添加以下 imports：
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
------------
--
---------- - ------------ -
--
------ ----- --------- - -用法
在你的组件中，你可以使用以下 HTML 代码：
---- --------------- -------
------- ---------
----------------------
--------------------------
--------------------------
----------------------------
--------------------------
---------------------------
-----------------------------------
---------------------------------------------
------这个示例使用了一个折线图。
然后你需要在组件中声明这些属性：
------ ------------------------ - -
------ ---- --- --- --- --- --- ---- ------ ------- ----
------ ---- --- --- --- --- --- ---- ------ ------- ----
------ ---- --- --- -- ---- --- ---- ------ ------- ---
--
------ -------------------------- - ----------- ----------- -------- -------- ------ ------- --------
------ -------------------------- - -
- -- ----
---------------- ------------------------
------------ ----------------------
--------------------- ----------------------
----------------- -------
-------------------------- -------
---------------------- -----------------------
--
- -- ---- ----
---------------- ---------------------
------------ -------------------
--------------------- -------------------
----------------- -------
-------------------------- -------
---------------------- ------------------
--
- -- ---
---------------- --------------------
------------ ------
--------------------- ----------------------
----------------- -------
-------------------------- -------
---------------------- -----------------------
-
--
------ -------------------- - -
----------- ----
--
------ ----------------------- - -----
------ -------------------- - -------
------ ------------------------ -
---------------
-
------ ------------------------ -
---------------
-这个示例将生成一个带有三个数据系列的折线图。你可以通过在数组中添加更多数据系列来添加更多的数据。另外，你还可以在 lineChartColors 数组中设置颜色。
结论
使用 angular2-charts 可以很容易地向你的 Angular2 应用程序中添加图表功能。它通过简单的 HTML 属性绑定来配置和使用图表。
如果你想进一步了解 angular2-charts 可以查看它的文档：http://valor-software.com/ng2-charts/。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600562e381e8991b448e0710