Highcharts图表异常求助：数据显示在Y轴及小时平均值实现

一、解决图表数据以文本显示在Y轴的问题 #

问题原因 #

从数据库读取的voltage、current_A、power_W字段为字符串类型，Highcharts无法将其识别为数值，因此直接以文本形式展示在Y轴，无法正常绘制折线图。

修复步骤 #

修改PHP读取数据的逻辑，将数值型字段强制转换为浮点类型：

<?php
$conn = mysqli_connect('localhost', 'root', 'raspberry', 'raspberry_sistem');

$query = "SELECT voltage, current_A, power_W, timestamp FROM readings";
$result = mysqli_query($conn, $query);

$data = array();
while ($row = mysqli_fetch_assoc($result)) {
  // 将字符串类型的数值转为浮点型
  $row['voltage'] = (float)$row['voltage'];
  $row['current_A'] = (float)$row['current_A'];
  $row['power_W'] = (float)$row['power_W'];
  $data[] = $row;
}

$json_data = json_encode($data);
?>

前端代码无需修改，此时Highcharts会识别到数值类型，正常绘制折线图。

二、实现小时平均值统计 #

修改SQL查询语句 #

通过SQL的GROUP BY按小时分组，结合AVG()函数计算每小时的平均值：

$query = "SELECT 
    DATE_FORMAT(timestamp, '%Y-%m-%d %H:00:00') AS hour_timestamp,
    AVG(voltage) AS avg_voltage,
    AVG(current_A) AS avg_current,
    AVG(power_W) AS avg_power
FROM readings
GROUP BY hour_timestamp
ORDER BY hour_timestamp";

调整前端代码适配新数据 #

修改前端的data映射逻辑，对应新的字段名：

Highcharts.chart('container', {
  title: {
    text: '每小时读数平均值'
  },
  xAxis: {
    title: {
      text: '时间（小时）'
    },
    categories: data.map(function(d) {
      return d.hour_timestamp;
    })
  },
  yAxis: [{
    title: {
      text: '平均电压'
    },
    opposite: true
  }, {
    title: {
      text: '平均电流'
    }
  }, {
    title: {
      text: '平均功率'
    },
    opposite: true
  }],
  series: [{
    name: '平均电压',
    type: 'line',
    yAxis: 0,
    data: data.map(function(d) {
      return d.avg_voltage;
    })
  }, {
    name: '平均电流',
    type: 'line',
    yAxis: 1,
    data: data.map(function(d) {
      return d.avg_current;
    })
  }, {
    name: '平均功率',
    type: 'line',
    yAxis: 2,
    data: data.map(function(d) {
      return d.avg_power;
    })
  }]
});

说明 #

• DATE_FORMAT(timestamp, '%Y-%m-%d %H:00:00')将时间戳格式化为“年-月-日 时:00:00”，确保按整小时分组。
• ORDER BY hour_timestamp保证时间序列按顺序展示。

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