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