在使用 Highcharts 进行图表绘制时，经常会遇到一些数据缺失的情况。例如，某个数据点没有对应的数值，或者数据源中出现了空值。通常情况下，Highcharts 会将缺失的数据点自动填充为 null，然后通过插值等方式对整个图表进行处理。然而，有些情况下我们希望将缺失的数据点默认填充为 0，以达到更好的可视化效果。本文将介绍如何实现这个功能。
方法一：使用 dataGrouping
Highcharts 提供了一个 dataGrouping 的属性，该属性可以对数据进行分组，从而支持一些聚合操作，比如求和、平均值等。在数据分组之前，我们可以利用 dataGrouping.approximation 属性将缺失的数据点填充为 0。示例代码如下：
-- -------------------- ---- -------
----------------------------- -
------- --
----- -
--- ----
--- ------
--- ----
--- ------
--- ---
--
------------- -
-------------- ------
------- -----
------ --------- ------
---------- -----
--------- ----
-
--
---在上述代码中，我们将 dataGrouping.fillNulls 属性设置为 true，这样就可以将缺失的数据点填充为 0。注意，这种方法将缺失的数据点全部填充为 0，如果需要只对特定的数据点进行填充，则需要使用方法二。
方法二：使用 Highcharts.wrap 方法
Highcharts 提供了一个 wrap 方法，该方法可以用来修改 Highcharts 内部的实现。通过 wrap 方法，我们可以在数据处理过程中拦截特定的数据点，并将其填充为 0。示例代码如下：
-- -------------------- ---- -------
------------------------------------------ -------------- -------- --------- ---------- -
--- ---- - ------------------ -----------
---------- - --------
-----------
--
--- -- - -- - - ------------ ---- -
---------- - --------
-- -
------------- --- ---- -- ------------- --- ---- --
------------- --- ---- -- -----------------
- -
-------------- -- --------------- -------------- ----
----
-
---------- - -----------
-
------ -----
---
----------------------------- -
------- --
----- -
--- ----
--- ------
--- ----
--- ------
--- ---
-
--
---在上述代码中，我们通过 wrap 方法修改了 Highcharts.Axis.prototype.getLinePath 方法的实现。具体来说，在 getLinePath 方法中，我们遍历了整个路径，并找到了连续两个数据点之间的空缺。如果这个空缺可以被填充为 0，则在两个数据点之间插入一个新的数据点。
需要注意的是，Highcharts.wrap 方法修改了 Highcharts 内部的实现，因此可能会对其他部分的功能产生影响。为了避免这种情况，我们应该在最小化范围内使用 wrap 方法。
总结
本文介绍了两种方法来将 Highcharts 缺失的数据点默认填充为 0，具有一定深度和指导意义。第一种方法使用 dataGrouping 属性，在数据分组之前对缺失的数据点进行填充；第二种方法使用 Highcharts.wrap 方法，修改了 Highcharts 内部的实现，对特定的数据点进行拦截并填充。需要根据实际情况选择合适的方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24727