什么是 @antv/adjust
@antv/adjust 是蚂蚁金服 AntV 团队开发的一款专门用于图表数据调整的 npm 包。它提供了多种数据调整方式，如堆叠、分组、排序等，可以方便地对图表数据进行处理，使得图表更加清晰易懂，同时还可以提高数据分析的效率。
安装 @antv/adjust
要使用 @antv/adjust，首先需要在项目中安装它。可以使用 npm 或者 yarn 安装，以下是安装的命令行代码：
npm install @antv/adjust --save
yarn add @antv/adjust
安装完成以后，就可以在项目中使用 @antv/adjust 来对图表数据进行处理了。
使用 @antv/adjust
@antv/adjust 提供了多种数据调整方式，下面我们将介绍两种常用的调整方式：堆叠和分组。
堆叠
堆叠是指将多条数据曲线叠加在一起展示，常用于比较多个数据集的总和。例如下面这个示例：
-- -------------------- ---- ------- ------ - ----- - ---- --------------- ----- ---- - - - ----- ------- ----- -------- ------ --- -- - ----- ------- ----- -------- ------ --- -- - ----- ------- ----- -------- ------ --- -- - ----- ------- ----- --------- ------ -- -- - ----- ------- ----- --------- ------ -- -- - ----- ------- ----- --------- ------ -- -- -- ----- ----- - --- ---------------------- -- -------- -------------------
以上代码中，我们使用了 @antv/adjust 中的 Stack 类对数据进行了堆叠处理。Stack 类的构造函数不需要传入任何参数，调用 Stack 实例的 process 方法可以对数据进行堆叠处理。
堆叠处理后的数据格式如下：
-- -------------------- ---- ------- - -- ------- --- - ----- ------- ----- -------- ------ ---- -- --- ---- -- - ----- ------- ----- -------- ------ ---- -- ----- ---- -- - ----- ------- ----- -------- ------ ---- -- ----- ---- -- -- -------- --- - ----- ------- ----- --------- ------ --- -- --- --- -- - ----- ------- ----- --------- ------ --- -- ---- --- -- - ----- ------- ----- --------- ------ --- -- ---- --- -- -
我们可以看到，经过堆叠处理后，原有的 value 属性被分成了 y 属性数组，分别表示每个数据在堆叠后的开始和结束 y 值。
分组
分组是指将多个数据集根据相同的分类进行分组展示，常用于比较不同分类之间的差异。例如下面这个示例：
-- -------------------- ---- ------- ------ - ----- - ---- --------------- ----- ---- - - - ----- ------- ----- -------- ------ --- -- - ----- ------- ----- ---------- ------ -- -- - ----- ------- ----- -------- ------ --- -- - ----- ------- ----- ---------- ------ -- -- - ----- ------- ----- -------- ------ --- -- - ----- ------- ----- ---------- ------ -- -- -- ----- ----- - --- -------------------------------------- -- -------- -------------------
以上代码中，我们使用了 @antv/adjust 中的 Group 类对数据进行了分组处理。Group 类的构造函数不需要传入任何参数，调用 Group 实例的 groupBy 方法可以指定用于分组的属性字段，在这里我们使用了 year 进行分组。
分组处理后的数据形式如下：
-- -------------------- ---- -------
-
-
----- -------
---------- -
- ----- ------- ----- -------- ------ --- --
- ----- ------- ----- ---------- ------ -- --
--
--
-
----- -------
---------- -
- ----- ------- ----- -------- ------ --- --
- ----- ------- ----- ---------- ------ -- --
--
--
-
----- -------
---------- -
- ----- ------- ----- -------- ------ --- --
- ----- ------- ----- ---------- ------ -- --
--
--
-注意，分组处理后的数据中，每个数据集还是保留了原有的数据结构，只是在数据外部包了一层对象，用于存储分组信息。
总结
在本文中，我们介绍了 @antv/adjust 这款 npm 包的使用方法，包括了堆叠和分组两种数据调整方式的详细说明和示例代码。使用 @antv/adjust 可以方便地对图表数据进行处理，使得图表更加清晰易懂，同时还可以提高数据分析的效率。如果你经常进行图表数据分析，在开发过程中可以试试使用 @antv/adjust，相信会有不错的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f423992dbf7be33b25672db