前言
Highcharts 是一个非常出色的可视化图表库，支持大量的数据可视化需求。在 Highcharts 中，提供了许多内置的功能，其中 Grouped Categories 功能可以快速地实现分组显示类别的需求，但这个功能默认仅支持 X 轴，如果在 Y 轴中希望使用分组类别，那么就需要安装 highcharts-grouped-categories 这个 npm 包。
本文将详细介绍 highcharts-grouped-categories 的使用方法，并提供示例代码，方便读者更好的理解和掌握使用技巧。
安装
首先需要确保已经安装了 Highcharts，接着可以通过以下命令来安装 highcharts-grouped-categories：
npm install highcharts-grouped-categories
使用
在 Highcharts 中，使用 highcharts-grouped-categories 可以通过两种方式来实现分组类别的需求：
1. 指定 Y 轴类别
需要将 Highcharts 中的 Y 轴数据进行处理，通过将没有类别的值设为 NULL，将 Y 轴类别信息保存在 categories 属性中，并将这个数据传入到 highcharts-grouped-categories 中进行处理。
示例代码如下：
-- -------------------- ---- -------
------ ---------- ---- -----------------------
------ --------------------- ---- --------------------------------
-- ----------
----------------------------------
-- --
----- ---- - -
- ----- ----- ----- ------- ------ --- --------- --- --
- ----- ----- ----- -------- ------ --- --------- --- --
- ----- ----- ----- ------- ------ --- --------- --- --
- ----- ----- ----- -------- ------ --- --------- --- --
- ----- ----- ----- -------- ------ --- --------- --- --
--
-- -------- ---------- ---
----- ----------- - ----- ---- ---- ---- -----
----- ----- - ----
------ -- -- ----- -- ---------- --- ---- - ---- - ------------------------------- ---
--------- -- -- --- - -----
-- ----
----------------------------- -
------ -
----- ---------
--
------ -
----- -------- ---------- -- --------
--
------ -
----------- ------------
--
------- --
----- ------
--------- -
-- ------- ----
-------- -------
--
---
---2. 扩展 Highcharts
通过扩展 Highcharts 中的 Axis.prototype 类型，实现在 Y 轴中直接调用 grouped-categories，这样使用起来更加的方便快捷。
示例代码如下：
-- -------------------- ---- -------
------ ---------- ---- -----------------------
------ --------------------- ---- --------------------------------
-- ----------
----------------------------------
-- -- ------------------- ------------------
--------- --- -
---------------------------------- - -------- --------- -
--- --------------------------- ---------
--
---------------
-- ----
----------------------------- -
------ -
----- ---------
--
------ -
----- -------- ---------- -- --------
--
------ -
-- ---- ------------------
------------------ -
-------- -------
--
--
------- --
----- -----
---
---总结
本文介绍了 npm 包 highcharts-grouped-categories 的使用方法，并提供了两种示例代码，旨在帮助读者更好的掌握使用技巧。对于需要在 Highcharts 中使用 Y 轴类别的需求，可以通过 highcharts-grouped-categories 来满足这个需求。希望本文对读者有所帮助，有关 Highcharts 的其他技术内容，敬请关注其他文章。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/96617