基于PHP与MySQL的Highcharts Solid Gauge湿度数据可视化问题求助

API 探路者

2026-5-6

问题：Highcharts Solid Gauge无法加载MySQL数据库中的湿度值

我最近在做一个项目，需要把MySQL数据库里的湿度值用Highcharts的Solid Gauge展示出来，折腾好几天都没搞定。目前PHP能成功从数据库拉取湿度数值，但Solid Gauge就是识别不了这个数值，图表一直没有数据显示。

我使用的原代码：

HTML/JS代码：

<?php include("hum.php"); ?>
<html>
<head>
<title>Highcharts Tutorial</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script src = "https://code.highcharts.com/highcharts.js"></script>
<script src = "https://code.highcharts.com/highcharts-more.js"></script>
<script src = "https://code.highcharts.com/modules/solid-gauge.js"></script>
</head>
<body>
<div style = "width: 600px; height: 400px; margin: 0 auto">
<div id = "container-speed" style = "width: 300px; height: 200px; float: left">
</div>
</div>
<script language = "JavaScript">
$(function () {
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '85%'],
size: '100%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: { enabled: false },
yAxis: {
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: { y: -70 },
labels: { y: 16 }
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
}
};
// The speed gauge
$('#container-speed').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 200,
title: { text: 'Speed' }
},
credits: { enabled: false },
series: [{
name: 'Speed',
data: [],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
'<span style="font-size:12px;color:silver">km/h</span></div>'
},
tooltip: { valueSuffix: ' km/h' }
}]
}));
// Bring life to the dials
setInterval(function () {
point = $('#container-speed').highcharts().series[0].points[0];
humidity;
$.getJSON("hum.php", function(data) {
point.update(parseFloat(humidity));
});
}, 2000);
});
</script>

PHP代码：

<?php
$mysqli= new mysqli('localhost', 'root','','sensorsdata');
$sql = ' SELECT humidity, UNIX_TIMESTAMP(CONCAT_WS(" ", date, time)) AS datetime FROM allv1 ORDER BY date DESC, time DESC LIMIT 1 ';
$result_4 = $mysqli->query($sql);
while($row_4 = $result_4->fetch_assoc()) {
echo $row_4['humidity'];
}
?>

问题分析与解决方法：

看了你的代码，问题主要出在AJAX数据解析和图表初始化逻辑上：

原PHP返回的是纯文本格式的数值，但前端用了$.getJSON，这会导致JSON解析失败——纯文本不是合法的JSON格式
原setInterval里的humidity变量未赋值，直接调用parseFloat(humidity)肯定拿不到有效数据
图表初始化时series.data是空数组，会导致points[0]不存在，更新时会报错

结合你自己更新的代码，我整理了完整的修复方案：

1. 修改PHP代码，返回合法JSON格式

<?php
$mysqli= new mysqli('localhost', 'root','','sensorsdata');
// 检查数据库连接是否成功
if ($mysqli->connect_error) {
    die("连接失败: " . $mysqli->connect_error);
}
$sql = ' SELECT humidity FROM allv1 ORDER BY date DESC, time DESC LIMIT 1 ';
$result_4 = $mysqli->query($sql);
$row_4 = $result_4->fetch_assoc();
// 输出JSON格式的湿度值，确保前端能正确解析
echo json_encode($row_4['humidity']);
$mysqli->close();
?>

2. 修改前端AJAX与图表初始化代码

$(function () {
// ... 省略gaugeOptions部分代码，保持不变

// 初始化图表时给series设置默认数据点，避免points[0]找不到
$('#container-speed').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 100, // 湿度范围一般是0-100%，这里改成合理范围
title: { text: 'Humidity' }
},
credits: { enabled: false },
series: [{
name: 'Humidity',
data: [0], // 初始化默认值0
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
'<span style="font-size:12px;color:silver">%</span></div>'
},
tooltip: { valueSuffix: ' %' }
}]
}));

// 定时更新图表数据
setInterval(function () {
    $.ajax({
        url: "hum.php",
        type:'get',
        dataType: "json",
        cache: false,
        success: function(data){
            var chart = $('#container-speed').highcharts();
            // 将返回的JSON数据转为浮点数，更新图表
            chart.series[0].points[0].update(parseFloat(data));
        },
        error: function(xhr, status, error) {
            // 可选：添加错误处理，方便调试
            console.log("请求失败: " + error);
        }
    });
}, 2000);
});

额外优化建议：

湿度的y轴范围建议改成0-100，因为湿度的常规取值范围是0%到100%
把图表的名称、单位都改成和湿度相关的内容，避免混淆
可以添加AJAX请求的错误处理，方便调试网络或数据库连接问题

现在图表应该能正常加载数据库中的湿度值了，你可以用同样的方法扩展其他数值的可视化。

内容的提问来源于stack exchange，提问作者melike köse