使间隙大小与时间序列数据的缺失时长成正比

嗨，这个问题其实是因为你的图表可能没正确配置时间轴类型，或者设置了固定间隙尺寸导致的。下面是具体的解决步骤：

• 确保X轴为时间类型
  Highcharts只有当X轴类型设为datetime时，才会基于实际时间戳的差值来计算轴上的间隔宽度。如果你的X轴是category类型，所有间隙都会等宽，这就是你当前遇到的问题。配置方式如下：

  xAxis: {
      type: 'datetime',
      // 可按需添加时间格式配置
      dateTimeLabelFormats: {
          hour: '%H:%M',
          day: '%Y-%m-%d'
      }
  }
  

• 移除固定的gapSize配置
  如果你之前设置了gapSize为固定值（比如gapSize: 1），这会强制所有数据缺失的间隙宽度一致。删除这个配置后，Highcharts会自动根据相邻数据点的时间差渲染间隙，缺失时长越长，间隙就越宽。

• 确保数据点的X值为时间戳
  你的数据点X值必须是毫秒级Unix时间戳（比如new Date('2024-05-20 01:11:00').getTime()），而非字符串格式的时间或类别标签。这样Highcharts才能准确计算两个数据点之间的时间间隔。

• 关闭数据连接（如果开启过）
  如果你设置了connectNulls: true，Highcharts会自动连接空值对应的点，不会显示间隙。确保这个配置为false（默认就是false），缺失数据的区域才会显示间隙：

  plotOptions: {
      series: {
          connectNulls: false
      }
  }
  

举个简单的示例代码，按上述配置后，不同时长的缺失间隙就会按比例显示：

Highcharts.chart('container', {
    xAxis: {
        type: 'datetime'
    },
    series: [{
        data: [
            [1716169200000, 20], // 01:00
            [1716169860000, 25], // 01:11
            // 缺失到01:30
            [1716171000000, 18], // 01:30
            [1716176520000, 30], // 02:12
            // 缺失到07:36
            [1716195360000, 22]  // 07:36
        ]
    }]
});

这样配置后，你会看到01:11到01:30的间隙明显比02:12到07:36的间隙窄，完全符合时间缺失的比例。

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