最近，我们需要在前端项目中展示关于数据的具体信息。其中，柱状图是比较常见的一个展示方式。那么，我们如何在数据中存在负数的情况下展示柱状图呢？今天，我将为大家介绍一个 npm 包：ultimate-column-chart-negative-values。
安装
在使用之前，我们需要先安装该 npm 包。可以通过如下的指令进行安装：
--- ------- ------------------------------------- ------
使用
在安装完成之后，我们就可以在我们的项目中使用该包了。在我们的 HTML 文件中，需要以下两个元素：
一个
元素，用于显示我们的柱状图，并且需要指定 ID：
---- -----------------
一个 JSON 格式的数据文件，用于指定我们需要展示的数据。
在我们的 JS 文件中，需要调用如下的代码进行展示：
--- ---- - -
------- ----------- ----------- -------- -------- ------ ------- --------
--------- --
------ --- ----- ---------
---------------- -----------------------
------------ ---------------------
------------ --
--------------------- -----------------------
----------------- ---------------------
----- -
---- -- -- --- --- --- ---
-
--
--
--- --- - --------------------------------------------------
--- ---------- -
----- ----------------------------------------
----- -----
-------- -------
---示例代码
--------- -----
------
------
-------------------------------------------- ------------
------- ----------------------------------------------------------------------------------
------- --------------------------------------------------------------------
-------
------
---- ------------- --------------------
------- --------------------
------
------- -----------------------
--- ---- - -
------- ----------- ----------- -------- -------- ------ ------- --------
--------- --
------ --- ----- ---------
---------------- -----------------------
------------ ---------------------
------------ --
--------------------- -----------------------
----------------- ---------------------
----- -
---- -- -- --- --- --- ---
-
--
--
--- ------- - -
------- -
------ --
------ -
------------ -----
-
--
-
--
--- --- - --------------------------------------------------
--- ---------- -
----- ----------------------------------------
----- -----
-------- -------
---
---------
-------
-------学习和指导意义
该 npm 包不仅仅是一个工具，更是一种解决问题的思路。在数据中存在负数的情况下，我们无法直接使用常规柱状图进行展示。这时，我们需要通过继承常规柱状图，实现一个新类型的柱状图，来解决这个问题。同时，该 npm 包使用了 ES6 和 Babel 进行了代码的优化和兼容，为我们展示了在前端项目中使用 ES6 和 Babel 的技巧和方法。对于有需要在项目中展示负数数据的同学来说，学习该 npm 包的指导意义还是很大的。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005668181e8991b448e2a62