Highcharts不规则时间间隔分钟级数据绘图相关问题咨询

时间粒度支持说明 #

• Highcharts的datetime类型X轴本身对时间粒度没有任何限制，从秒、分钟、小时到天、年级别都原生支持，你所看到的天粒度案例只是官方示例的常见场景，并非功能上限。
• 处理你的数据时只需注意：提前把2021/10/31 15:12:45这类字符串格式转换为JavaScript毫秒级时间戳（即1970年1月1日以来的毫秒数值），Highcharts会自动识别时间间隔，缺失的时间段会在X轴上正常留空，不会强行把数据点按等间距排列，完全匹配不规则时间序列的绘制需求。

自定义X轴数据源设置 #

你完全可以指定数组中的任意一列作为X轴数据源，两种常用配置方式如下：

1. 双列数组模式：把原始数据处理为[[时间戳1, 温度1], [时间戳2, 温度2], ...]的格式，直接赋值给series的data属性即可，默认第一列为X轴值，第二列为Y轴值
2. 键值对模式：如果你的数组是多列对象结构，比如[{time: '2021/10/31 15:12:45', temp: 23.5, ...}, ...]，可以通过xKey字段直接指定对应列作为X轴数据源，示例配置参考：

Highcharts.chart('container', {
  xAxis: {
    type: 'datetime', // 核心配置，声明X轴为时间类型
    // 可自定义时间刻度显示格式，按需调整分、秒、小时的展示规则
    dateTimeLabelFormats: {
      second: '%H:%M:%S',
      minute: '%H:%M',
      hour: '%H:%M'
    }
  },
  series: [{
    type: 'line',
    name: '温度',
    data: yourRawData, // 你的原始数据数组
    xKey: 'time' // 指定数组中time列作为X轴数据源
  }]
});

注意：如果使用xKey指定字段，需要提前把对应字段的时间字符串转换为毫秒级时间戳，否则X轴无法正确识别时间顺序和间隔。

缺失数据可选配置 #

针对你提到的偶尔存在时间段缺失的情况，Highcharts默认会在缺失时间段断开连线，如果需要保留连续连线效果，可以在series配置中添加connectNulls: true即可。

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