PHP+Highcharts连接MySQL可视化温度数据异常：仅显示时间轴无温度曲线

嗨，我看了你的代码和问题描述，很快就发现了关键问题——你的温度数据是字符串类型，而Highcharts需要数值类型来绘制曲线！下面给你一步步解决的方法：

问题根源 #

从你输出的JSON数据能看到，yAxis1里的温度值都是带引号的字符串（比如"22"），但Highcharts的折线图要求数据是数字类型，它识别不了字符串形式的数值，所以才只显示X轴，不渲染温度曲线。

具体修复步骤 #

1. 修正PHP中数据处理的逻辑 #

在PHP循环读取数据库行的时候，把温度值强制转成整数/浮点数，确保是数值类型：

while ($row = mysqli_fetch_array($result)) {
    $data['xAxis'][] = $row['datetime'];
    // 将字符串温度值转为整数类型
    $data['yAxis1'][] = (int)$row['temp'];
}

注：你之前用的CAST(temp AS INT)在SQL层面能转换，但PHP读取后依然是字符串格式，所以必须在PHP里做类型转换才能让Highcharts识别。

2. 优化数据库字段类型（可选但推荐） #

既然存储的是温度数值，把temp字段从VARCHAR(60)改成FLOAT或者INT会更合理，能从根源避免类型转换的麻烦：

ALTER TABLE temp_humidity MODIFY COLUMN temp FLOAT;

修改后后续查询直接拿到的就是数值，不需要额外转换。

3. 处理X轴日期重复的问题（额外优化） #

从你的JSON数据看，X轴有大量重复的日期（比如一堆2022-11-21），会导致X轴显示拥挤。你可以考虑两种优化方式：

• 按日期分组取平均温度：

SELECT DATE(datetime) AS datetime, AVG(CAST(temp AS FLOAT)) AS temp 
FROM temp_humidity 
GROUP BY DATE(datetime);

• 保留完整时间戳，让X轴显示具体时间点：

SELECT datetime AS datetime, CAST(temp AS INT) AS temp FROM temp_humidity;

验证修复效果 #

修改后，你的JSON数据里的yAxis1应该变成不带引号的数值，示例如下：

var data = {
    "xAxis":["2022-11-21", "2022-12-10"],
    "yAxis1":[22.5, 25]
};

这样Highcharts就能正确识别数值，绘制出温度曲线了。

最后给你个新手小技巧：可以在浏览器控制台用console.log(data)查看数据结构，能快速排查这类类型不匹配的问题~

备注：内容来源于stack exchange，提问作者juhuDom