前言
在前端开发中，数据可视化是极为重要的一个方面。而 Nvd3 是一个基于 D3 的可重用图表库，在海量数据展示、数据可视化等方面应用广泛。在使用 Nvd3 的过程中，会发现 Nvd3 的 API 不是很好用，这时候就有了 ngnvd3 这个 npm 包。ngnvd3 是基于 AngularJS 和 D3.js 的封装可重用图表库，可以方便地使用 Nvd3 中的图表进行数据可视化。本文将详细介绍 ngnvd3 的使用方法，并且附上示例代码，帮助读者更好地理解和使用 ngnvd3。
安装和引入
ngnvd3 是一个基于 AngularJS 和 D3.js 的封装可重用图表库，因此在使用 ngnvd3 之前，必须要先引入 AngularJS 和 D3.js。只需要在 HTML 文件中添加以下代码即可引入 AngularJS 和 D3.js：
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
ngnvd3 的安装方式十分简单，我们只需要在控制台中输入以下命令即可：
npm install ngnvd3 --save
接下来，我们在 HTML 文件中引入 ngnvd3：
<script src="node_modules/ngnvd3/dist/ng-nvd3.min.js"></script>
使用教程
ngnvd3 的使用方法非常简单，我们只需要在 AngularJS 的控制器中为其赋值即可。以展示折线图为例，代码如下所示：
-- -------------------- ---- -------
------------------------------- ---------------- -
-------------- - -
------ -
----- ------------
------- ----
------ - -
---- ---
------ ---
------- ---
----- --
--
-- ------------ ------ ---- --
-- ------------ ------ ---- --
------------------------ -----
------ -
---------- -- -----
--
------ -
---------- -- ------
----------- ------------
------ ---------------------
--
------------------ ---
--
----------- -----
-
--
----------- - -
-
------- -
- -- -- -- - --
- -- -- -- - --
- -- -- -- - --
- -- -- -- - --
- -- -- -- -- --
- -- -- -- -- --
- -- -- -- -- --
- -- -- -- -- --
- -- -- -- -- --
- -- -- -- -- --
- -- --- -- --- -
--
------ ---------
-
--
---通过以上代码，我们就实现了一个简单的折线图展示。在代码中，我们首先为折线图设置了一些属性，比如 x 轴和 y 轴的标签等等。接下来，我们需要为图表提供数据。在我们的代码中，我们为 $scope.data 这个变量提供了一组数据，其中 x 代表折线图上的横坐标，y 则代表折线图上的纵坐标。从代码中还可以看到，我们还为该折线赋予了一个颜色，这个颜色可以通过调整 color 属性来修改。
类似的，如果需要展示的是柱状图，只需要修改 chart 属性中的 type 为 discreteBarChart，并且数据的格式也需要做出相应的调整。代码如下所示：
-- -------------------- ---- -------
------------------------------ ---------------- -
-------------- - -
------ -
----- -------------------
------- ----
------ - -
---- ---
------ ---
------- ---
----- --
--
-- ------------ ------ -------- --
-- ------------ ------ -------- --
------------ ------------
------ ------------------
--
--------- ----
------ -
---------- -- -----
--
------ -
---------- -- ------
------------------ ---
--
----------- -----
----------- -----
-
--
----------- - -
-
---- ----------- --------
------- -
- ------- - --- - ------- - -- --
- ------- - --- - ------- - -- --
- ------- - --- - ------- - -- --
- ------- - --- - ------- - -- --
- ------- - --- - ------- - - -
-
-
--
---通过以上代码，我们就得到了一个简单的柱状图。在该代码中，我们为 $scope.data 变量提供了一组由 label 和 value 组成的数据。其中，label 代表柱子的名称，value 则代表该柱子的高度。
除了折线图和柱状图之外，ngnvd3 还支持许多其他的图表类型，如散点图，饼图和堆叠图等等。此处仅展示了折线图和柱状图的例子，如果需要使用其他类型的图表，可以参考 ngnvd3 的官方文档。
总结
通过本文的介绍，我们学习到了如何使用 ngnvd3 来进行数据可视化，并且看到了折线图和柱状图的实际代码。相信读者已经有了一定的了解，并且能够熟练应用 ngnvd3 创建自己想要的图表了。
示例代码
HTML 代码：
-- -------------------- ---- -------
--------- -----
----- --------- ------------------
------
----- ----------------
------------- ------------
------- ------------------------------------------------------------------------------------
------- -------------------------------------------------------------------------
------- -------------------------------------------------------
-------
----- ------------------------------
---- -----------
----- ----------------- -------------------
------
------- ----------------------
-------
-------JS 代码：
-- -------------------- ---- -------
--- --- - -------------------------- ----------
------------------------------- ---------------- -
-------------- - -
------ -
----- ------------
------- ----
------ - -
---- ---
------ ---
------- ---
----- --
--
-- ------------ ------ ---- --
-- ------------ ------ ---- --
------------------------ -----
------ -
---------- -- -----
--
------ -
---------- -- ------
----------- ------------
------ ---------------------
--
------------------ ---
--
----------- -----
-
--
----------- - -
-
------- -
- -- -- -- - --
- -- -- -- - --
- -- -- -- - --
- -- -- -- - --
- -- -- -- -- --
- -- -- -- -- --
- -- -- -- -- --
- -- -- -- -- --
- -- -- -- -- --
- -- -- -- -- --
- -- --- -- --- -
--
------ ---------
-
--
---
------------------------------ ---------------- -
-------------- - -
------ -
----- -------------------
------- ----
------ - -
---- ---
------ ---
------- ---
----- --
--
-- ------------ ------ -------- --
-- ------------ ------ -------- --
------------ ------------
------ ------------------
--
--------- ----
------ -
---------- -- -----
--
------ -
---------- -- ------
------------------ ---
--
----------- -----
----------- -----
-
--
----------- - -
-
---- ----------- --------
------- -
- ------- - --- - ------- - -- --
- ------- - --- - ------- - -- --
- ------- - --- - ------- - -- --
- ------- - --- - ------- - -- --
- ------- - --- - ------- - - -
-
-
--
---来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b0681e8991b448d8aba