Highstock图表日期时间显示异常技术求助

我来帮你搞定这个问题——核心原因是你给Highstock的时间格式和xAxis配置不匹配，导致图表没法正确解析数据库里的日期数据。

问题根源 #

Highstock的datetime类型xAxis需要的是毫秒级Unix时间戳，但你现在传递的是格式化后的字符串（比如"d-F H:i"格式的文本），还错误混用了categories配置（这是给分类轴用的，不是时间轴）。这就导致Highstock识别不了这些时间字符串，只能默认从Unix纪元（1970-01-01）开始生成极小的时间间隔，也就是你看到的Thursday Jan 1 00.00.00.000到00.00.00.039。

修复步骤 #

1. 修改PHP代码，输出毫秒级时间戳

把PHP里处理时间的部分改成生成毫秒级时间戳，而非格式化字符串：

$i = 0;
foreach ($readings_time as $reading){
    // 将数据库时间转成Unix时间戳（秒），加上16小时偏移，再转成毫秒
    $timestamp_sec = strtotime($reading) + 16 * 3600; // 16小时=16*3600秒
    $readings_time[$i] = $timestamp_sec * 1000; // 转成毫秒级，适配Highstock
    $i += 1;
}

这样输出的reading_time就是Highstock能直接识别的时间戳数组了。

2. 修正Highstock的xAxis配置

去掉categories属性，datetime类型的轴不需要手动指定分类，Highstock会自动根据数据里的时间戳生成轴刻度：

xAxis: {
    type: 'datetime'
}

3. 确保前端数据格式正确

在前端代码里，要把时间戳和对应的数据值组合成[时间戳, 值]的数组对，传给series的data属性。比如：

// 假设你从PHP拿到了value1和reading_time数组
var value1Data = [];
for (let i = 0; i < value1.length; i++) {
    value1Data.push([reading_time[i], value1[i]]);
}

// 然后在series里使用这个组合后的数据
series: [{
    name: 'Value 1',
    data: value1Data
}]

验证效果 #

完成以上修改后，Highstock就能正确解析数据库里的日期时间，自动生成间隔30分钟的时间轴，和你的数据完全匹配了。

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