使用XMLHttpRequest实现水质Gauge仪表盘实时更新后图表不显示求助

核心问题梳理 #

• 结构错误：server.php返回完整HTML文档，插入主页面后导致DOM结构嵌套混乱
• 逻辑断裂：PHP循环位置错误将drawChart函数截断，函数结构不合法无法执行
• 执行限制：浏览器默认不执行通过innerHTML插入的<script>标签内容，你写的图表初始化代码根本不会运行
• 资源冲突：每秒重复加载谷歌图表依赖库、重复初始化图表导致逻辑冲突
• 查询冗余：每次请求全量拉取历史水质数据，实际仅需最新1条数据即可更新仪表盘

修复步骤 #

第一步：改写index.php，把图表初始化逻辑全部放到主页面 #

把依赖加载、图表初始化、更新逻辑都放在主页面，XHR只拉取纯数据，不涉及DOM和JS替换：

<?php
    include("connection.php");
?>
<html>
<head>
    <title>水质实时仪表盘</title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {'packages': ['gauge']});
        let chart, data, options;
        // 页面加载完成后初始化图表
        google.charts.setOnLoadCallback(() => {
            // 初始化基础配置
            options = {
                width: 500,
                height: 200,
                minorTicks: 5
            };
            // 初始化图表容器
            chart = new google.visualization.Gauge(document.getElementById('chart_div'));
            // 先加载一次数据，之后每秒更新
            loadData();
            setInterval(loadData, 1000);
        });

        // 拉取最新数据更新图表
        function loadData() {
            const xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    // 解析返回的JSON数据
                    const latestData = JSON.parse(this.responseText);
                    // 更新图表数据
                    data = google.visualization.arrayToDataTable([
                        ['Label', 'Value'],
                        ['Temperature', latestData.temperature],
                        ['pH', latestData.pH],
                        ['DO', latestData.DO],
                        ['Turbidity', latestData.Turbidity]
                    ]);
                    // 重绘图表
                    chart.draw(data, options);
                }
            };
            xhttp.open("GET", "server.php", true);
            xhttp.send();
        }
    </script>
</head>
<body>
    <div class="container">
        <div id="chart_div" style="width: 400px; height: 120px; margin-top:30px"></div>
    </div>
</body>
</html>

第二步：改写server.php，仅返回最新的一条水质JSON数据 #

<?php
$connection = mysqli_connect('localhost', 'root', '', 'adminpanel');
// 只查最新的1条数据，加LIMIT提升查询效率
$query = 'SELECT * FROM tbl_waterquality ORDER BY id DESC LIMIT 1';
$query_run = mysqli_query($connection, $query);
$row = mysqli_fetch_assoc($query_run);
// 设置响应头为JSON格式
header('Content-Type: application/json');
// 直接输出JSON数据
echo json_encode($row);
?>

修改完成后即可正常实现每秒无刷新更新仪表盘数据的效果，和你之前单独调试时的展示效果一致。

内容的提问来源于stack exchange，提问作者Corbin Jones