在前端开发中，使用数据可视化工具展示数据是一件很普遍的事情。而在大多数情况下，我们需要根据数据的不同维度对数据进行分类，然后用不同的颜色或者图形来表示不同类别的数据点，以方便用户更好地理解数据。而 npm 包 vbb-line-colour-points 就是用来处理这种情况的一个非常好用的工具。在本篇文章中，我们将会介绍 vbb-line-colour-points 的使用方法，并为读者提供一些有用的示例代码。
安装和基本使用
vbb-line-colour-points 是一个非常小巧而且易于使用的 npm 包。我们可以通过以下命令来安装它：
--- ------- ----------------------
安装完成后，我们就可以在代码中通过 require 来引入它：
----- ----------- - ----------------------------------
一个基本的使用示例如下：
----- ------- - -
- ----- -- ------- ------- --- ---------- ---------- ------ ---------- ------ ---------- -------- ----- --
- ----- -- ------- ------- --- ---------- --------------- ------ ---------- ------ ---------- -------- ------- --
- ----- -- ------- ------- --- ---------- ------------- ------ ---------- ------ ---------- -------- ------ --
- ----- -- ------- ------- ---- ---------- ----------- ------ ---------- ------ ---------- -------- ----- --
- ----- -- ------- ------- ---- ---------- ---------------- ------ ---------- ------ ---------- -------- ------- --
- ----- -- ------- ------- ---- ---------- -------- --------- ------ ---------- ------ ---------- -------- ------ -
--
----- ------- - - ----------- -------- --------- ------- ------- ---------- ------ --
----- ------ - -------------------- ---------在这个示例中，我们传递了一个包含数据的数组 rawData，以及一些相关的配置信息 options。colorPoints 函数会对 rawData 中的每一条数据进行颜色分类，并将结果保存在 result 变量中：
-
--------- -
------ - ----------- - ---------- ---------- - --
-------- - ----------- - --------------- --------------- - --
------- - ----------- - ------------- -------- -------- - -
--
------- -
- ----- -- ------- ------- --- ---------- ---------- ------ ---------- ------ ---------- -------- ----- --
- ----- -- ------- ------- --- ---------- --------------- ------ ---------- ------ ---------- -------- ------- --
- ----- -- ------- ------- --- ---------- ------------- ------ ---------- ------ ---------- -------- ------ --
- ----- -- ------- ------- ---- ---------- ----------- ------ ---------- ------ ---------- -------- ----- --
- ----- -- ------- ------- ---- ---------- ---------------- ------ ---------- ------ ---------- -------- ------- --
- ----- -- ------- ------- ---- ---------- -------- --------- ------ ---------- ------ ---------- -------- ------ -
-
-这个结果包含了两部分：
- colors，用来记录不同颜色的分类信息。在这个示例中，我们将所有红色的点视为一类，绿色的视为一类，蓝色的视为一类。对于每个分类，我们会记录它所包含的所有站点名称。
- data，是传递给函数的原始数据。vbb-line-colour-points 可以处理包含任意字段的数据，而不仅仅是示例中的 id、line、station、lat、lng 和 color。
配置项
在上面的例子中，我们使用了一个包含三个字段的配置信息 options，来告诉 vbb-line-colour-points 函数如何处理数据。下面是 options 中每个配置项的详细说明：
colorKey：颜色分类所依据的字段名。默认为 'color'。lonlat：经纬度所依据的字段名。默认为 ['lng', 'lat']，表示使用 lng 和 lat 字段来表示经度和纬度。lineKey：用来表示数据所属路线的字段名。可以将这个字段用来进行更细粒度的分类，在数据点的颜色上添加更多的信息。默认为 null，表示不对数据进行路线分类。
颜色分类
在 vbb-line-colour-points 中，我们使用颜色分类来对数据进行分类。具体来说，就是根据某个关键字段（通常是 colorKey）的值，将所有数据点分成若干个颜色类别。
在上面的示例中，我们使用以下代码来进行颜色分类：
----- ------- - - ----------- -------- --------- ------- ------- ---------- ------ -- ----- ------ - -------------------- ---------
这行代码指定了 colorKey 的值为 'color'，表示我们将根据每个数据点的 color 字段值，将其分为不同的颜色类别。在示例数据中，我们有三个不同的颜色类别：红色、绿色和蓝色。
路线分类
除了默认的颜色分类外，我们还可以使用路线分类来对数据进行更细粒度的分类。对于某些特殊的数据集，使用路线分类可能会更有用。
如果我们要使用路线分类，可以通过指定 lineKey 的值来实现：
----- ------- - - ----------- -------- --------- ------- ------- ---------- ------ -- ----- ------ - -------------------- ---------
在示例数据中，我们有两条不同的路线：S-Bahn 7 和 U-Bahn U2。
示例代码
下面是一个更加完整的示例，包括了数据和代码：
----- ----------- - ----------------------------------
----- ------- - -
- ----- -- ------- ------- --- ---------- ---------- ------ ---------- ------ ---------- -------- ----- --
- ----- -- ------- ------- --- ---------- --------------- ------ ---------- ------ ---------- -------- ------- --
- ----- -- ------- ------- --- ---------- ------------- ------ ---------- ------ ---------- -------- ------ --
- ----- -- ------- ------- ---- ---------- ----------- ------ ---------- ------ ---------- -------- ----- --
- ----- -- ------- ------- ---- ---------- ---------------- ------ ---------- ------ ---------- -------- ------- --
- ----- -- ------- ------- ---- ---------- -------- --------- ------ ---------- ------ ---------- -------- ------ -
--
----- ------- - - ----------- -------- --------- ------- ------- ---------- ------ --
----- ------ - -------------------- ---------
---------------------------
-------------------------输出结果如下：
-
--------- -
------ - ----------- - ---------- ---------- - --
-------- - ----------- - --------------- --------------- - --
------- - ----------- - ------------- -------- -------- - -
--
------- -
- ----- -- ------- ------- --- ---------- ---------- ------ ---------- ------ ---------- -------- ----- --
- ----- -- ------- ------- --- ---------- --------------- ------ ---------- ------ ---------- -------- ------- --
- ----- -- ------- ------- --- ---------- ------------- ------ ---------- ------ ---------- -------- ------ --
- ----- -- ------- ------- ---- ---------- ----------- ------ ---------- ------ ---------- -------- ----- --
- ----- -- ------- ------- ---- ---------- ---------------- ------ ---------- ------ ---------- -------- ------- --
- ----- -- ------- ------- ---- ---------- -------- --------- ------ ---------- ------ ---------- -------- ------ -
-
-在这个示例中，我们使用了颜色分类和路线分类两种分类方式。其中，颜色分类使用了 'color' 字段来分类，路线分类使用了 'line' 字段来分类。输出结果中，我们可以看到颜色分类共有三种颜色，而每种颜色包含了不同的站点名称。路线分类共有两条路线，每条路线包含了不同的站点名称。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6006734f890c4f727758387c