切换为Highstock后图表日期时间显示错误问题求助

问题原因 #

Highcharts 允许 datetime 类型 x 轴配合 categories 使用字符串日期，但 Highstock 的 datetime 轴为了支持范围选择器、时间数据分组等特性，设计上默认依赖毫秒级 Unix 时间戳识别时间，不识别字符串格式的 categories 配置。你传入的字符串日期无法被解析，就默认显示1970年的初始时间。

修复步骤 #

1. 修改PHP端时间处理逻辑

把原来转成日期字符串的逻辑，改成输出JS兼容的毫秒级时间戳，同时将时间和温度值组合成Highstock要求的二维数组格式：

// 原来的时间处理逻辑替换成下面的代码
$i = 0;
foreach ($readings_time as $reading){
  // PHP strtotime返回秒级时间戳，乘以1000转为JS需要的毫秒级时间戳
  $readings_time[$i] = strtotime("$reading + 16 hours") * 1000;
  $i += 1;
}

// 组合时间+温度的二维数组，不需要单独传value1和reading_time
$value1_arr = array_reverse(array_column($sensor_data, 'value1'));
$reading_time_arr = array_reverse($readings_time);
$chart_data = [];
foreach($value1_arr as $k => $v){
    $chart_data[] = [$reading_time_arr[$k], $v];
}
$chart_data = json_encode($chart_data, JSON_NUMERIC_CHECK);

2. 修改前端Highstock配置

删掉xAxis的categories配置，调整series数据源，关闭UTC自动转换避免时区偏差：

// 读取PHP输出的组合数据
var chartData = <?php echo $chart_data; ?>;
// 关闭UTC自动转换，避免时间偏移
Highcharts.setOptions({time: {useUTC: false}});

var chartH = new Highcharts.stockChart({
  chart: { renderTo : 'chart-temperature',
  type: 'spline'   
  },
  title: { text: 'Roof Temperature' },
  series: [{
  showInLegend: false,
  data: chartData // 替换为组合好的时间+温度数组
  }],
  plotOptions: {
   spline: { animation: false,
  dataLabels: { enabled: true }
  },
  series: { color: '#059e8a' }
  },
  rangeSelector: {
    buttons: [{
        type: 'day',
        count: 3,
        text: '3d'
    }, {
        type: 'week',
        count: 1,
        text: '1w'
    }, {
        type: 'month',
        count: 1,
        text: '1m'
    }, {
        type: 'month',
        count: 6,
        text: '6m'
    }, {
        type: 'year',
        count: 1,
        text: '1y'
    }, {
        type: 'all',
        text: 'All'
    }],
    selected: 3
  },
  xAxis: { 
    type: 'datetime',
    // 按需调整不同时间粒度的显示格式
    dateTimeLabelFormats: { 
      second: '%H:%M:%S',
      minute: '%H:%M',
      hour: '%d-%b %H:%M',
      day: '%d-%b'
    }
    // 删掉原来的categories配置
  },
  yAxis: {
    title: { text: 'Temp (C)' }
  },
  credits: { enabled: false }
});

修改后x轴就会按照正确时间渲染，和你之前Highcharts版本的显示效果一致。

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