前言
nvd3 是一个基于 D3.js 的可重用图表库，支持众多的图表类型，如折线图、散点图、饼图等。ngx-nvd3 是一个 Angular 的 nvd3 封装库，在 Angular 中使用 nvd3 更加方便快捷。在本文中，我们将介绍如何使用 ngx-nvd3 来在 Angular 中创建各种图表。
安装 ngx-nvd3
安装 ngx-nvd3 很简单，只需要使用 npm 命令就可以了：
--- ------- -------- ------
使用 ngx-nvd3 创建折线图
下面我们将通过一个简单的示例来介绍如何使用 ngx-nvd3 来创建折线图。
引入 ngx-nvd3
在组件中引入 ngx-nvd3：
------ - --------- - ---- ----------------
------ - ---- - ---- -----------
------------
--------- -----------
--------- -
-----
----- ------------------- ---------------------
------
-
--
------ ----- ------------ -
--------
-----
---------- -
------------ - -
------ -
----- ------------
------- ----
------- -
---- ---
------ ---
------- ---
----- --
--
-- ------------ ------ ---- --
-- ------------ ------ ---- --
------------------------ -----
------ -
---------- ----- -----
--
------ -
---------- -------- -----
----------- ------------
------ ---------------------
--
------------------ ---
-
-
--
--------- - -
-
------- -
- -- -- -- - --
- -- -- -- - --
- -- -- -- - --
- -- -- -- - --
- -- -- -- - --
- -- -- -- - --
- -- -- -- - --
- -- -- -- - --
- -- -- -- - -
--
---- ------- ---
------ ---------
-
--
-
-配置折线图的选项和数据
在组件的 ngOnInit 方法中，我们创建了一个选项对象和一个数据对象，并把它们绑定到了模板中的 nvd3 组件上。选项对象用于配置图表的一些参数，例如图表类型、大小、边距、x 轴和 y 轴等等。数据对象用于描述图表中的数据点和系列。
运行示例
运行上述代码，你将得到一个简单的折线图。如果你想创建更多的图表类型，只需要更改选项和数据对象中的一些参数即可。
总结
在本文中，我们介绍了如何使用 npm 包 ngx-nvd3 来创建 Angular 中的各种图表类型。通过阅读本文，你应该能够使用 ngx-nvd3 来创建自己的图表，并开发出更加丰富的数据可视化应用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600562a481e8991b448dfdf2