如何让Highcharts仅在值为null时连接空值，排除NaN？

要实现只连接null值、遇到NaN则断开折线的效果，直接用Highcharts原生的connectNulls做不到（它会统一处理所有空值类型），我们可以通过预处理数据并拆分多个系列的方式实现，具体步骤如下：

步骤1：编写数据预处理函数 #

遍历原始数据，将连续的非NaN片段（包含其中的null）拆分为独立的子系列，遇到NaN则断开并开启新的子系列：

const originalData = [20, 60, null, 11, null, 160, 120, 130, NaN, NaN, 80, 40];
const processedSeries = [];
let currentSeriesData = [];

originalData.forEach((value, index) => {
  if (!Number.isNaN(value)) {
    // 非NaN值（包括null）加入当前系列
    currentSeriesData.push(value);
  } else {
    // 遇到NaN时，如果当前系列有数据，就存入processedSeries
    if (currentSeriesData.length > 0) {
      processedSeries.push({
        data: [...currentSeriesData],
        type: 'line',
        name: 'Area range series',
        marker: { enabled: false },
        connectNulls: true // 每个子系列内部连接null
      });
      currentSeriesData = [];
    }
  }
});

// 处理最后一段非NaN的数据
if (currentSeriesData.length > 0) {
  processedSeries.push({
    data: [...currentSeriesData],
    type: 'line',
    name: 'Area range series',
    marker: { enabled: false },
    connectNulls: true
  });
}

步骤2：更新Highcharts配置 #

把原来的单个series替换成处理后的processedSeries，同时保留其他配置：

Highcharts.chart('container', {
  title: {
    text: '仅连接Null值，NaN值处断开折线'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },
  series: processedSeries // 使用处理后的多系列数据
});

原理说明 #

• 每个子系列内部开启connectNulls: true，所以系列内的null值会被自动连接；
• NaN所在的位置会被拆分成不同系列，不同系列的折线不会自动连接，从而实现断开的效果；
• 所有子系列使用相同的名称和样式，视觉上看起来和单个系列完全一致。

如果你的数据量很大，这种方法的性能也足够稳定，因为Highcharts对多系列的渲染优化做得很好。

内容的提问来源于stack exchange，提问作者ConfusedDeveloper