查询MySQL温度传感器数据表并返回JSON格式数据

嘿，这个需求太常见了，我来一步步帮你搞定！

我们需要从MySQL取出数据，转成PHP数组后编码为JSON，最后传递给前端的JavaScript图表使用。下面是完整的实现步骤和代码示例：

第一步：PHP连接数据库并生成JSON数据 #

我推荐用PDO操作数据库，它比mysqli更安全灵活。你只需要替换代码里的数据库配置和表名即可：

<?php
// 替换成你自己的数据库信息
$dbHost = 'localhost';
$dbName = '你的数据库名称';
$dbUser = '数据库用户名';
$dbPass = '数据库密码';

try {
    // 建立PDO连接，指定utf8mb4字符集避免乱码
    $pdo = new PDO(
        "mysql:host=$dbHost;dbname=$dbName;charset=utf8mb4",
        $dbUser,
        $dbPass,
        [PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION]
    );

    // 查询数据：可以根据需求加过滤条件，比如按时间段或传感器ID筛选
    // 示例是取出所有数据并按时间排序
    $query = "SELECT sensorId, dateRecorded, tempF FROM 你的表名 ORDER BY dateRecorded ASC";
    $stmt = $pdo->query($query);
    
    // 把查询结果转成关联数组
    $sensorRecords = $stmt->fetchAll(PDO::FETCH_ASSOC);
    
    // 编码成JSON数组，JSON_PRETTY_PRINT方便调试，生产环境可以去掉
    $jsonData = json_encode($sensorRecords, JSON_PRETTY_PRINT);

} catch (PDOException $e) {
    // 出错时输出错误信息
    die("数据库操作失败：" . $e->getMessage());
}
?>

第二步：在PHP页面中传递JSON给JavaScript图表 #

接下来，在同一个PHP页面里把生成的JSON数据传给前端JS。下面用Chart.js（一款常用的JS图表库）做示例，展示如何把多传感器的温度数据绘制成折线图：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>温度传感器数据图表</title>
    <!-- 引入Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- 引入时间轴适配器，用于处理时间格式 -->
    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
</head>
<body>
    <!-- 图表容器，设置合适的宽度 -->
    <div style="width: 85%; margin: 2rem auto;">
        <canvas id="temperatureChart"></canvas>
    </div>

    <script>
        // 直接从PHP获取JSON数据，转成JS对象
        const sensorData = <?php echo $jsonData; ?>;

        // 整理图表数据：按传感器ID分组
        const chartDatasets = {};
        sensorData.forEach(record => {
            const sensorId = record.sensorId;
            // 初始化新传感器的数据集
            if (!chartDatasets[sensorId]) {
                chartDatasets[sensorId] = {
                    label: `传感器 ${sensorId}`,
                    data: [],
                    borderColor: `hsl(${sensorId * 130}, 70%, 50%)`, // 给每个传感器分配不同颜色
                    tension: 0.1,
                    fill: false
                };
            }
            // 添加温度数据，x轴为时间，y轴为温度值
            chartDatasets[sensorId].data.push({
                x: record.dateRecorded,
                y: parseFloat(record.tempF)
            });
        });

        // 初始化折线图
        const ctx = document.getElementById('temperatureChart').getContext('2d');
        new Chart(ctx, {
            type: 'line',
            data: {
                datasets: Object.values(chartDatasets)
            },
            options: {
                responsive: true,
                scales: {
                    x: {
                        type: 'time',
                        time: {
                            unit: 'minute', // 根据数据间隔调整，比如hour、day
                            tooltipFormat: 'yyyy-MM-dd HH:mm'
                        },
                        title: {
                            display: true,
                            text: '记录时间'
                        }
                    },
                    y: {
                        title: {
                            display: true,
                            text: '温度 (°F)'
                        }
                    }
                },
                plugins: {
                    tooltip: {
                        mode: 'index',
                        intersect: false
                    }
                }
            }
        });
    </script>
</body>
</html>

实用注意事项 #

• 性能优化：如果表中数据量很大，不要一次性取出所有数据！可以通过LIMIT或者时间范围（比如WHERE dateRecorded >= '2024-01-01'）筛选数据，避免前端加载过慢。
• 字符集问题：确保数据库表的字符集是utf8mb4，PHP连接时也指定了该字符集，防止JSON出现乱码。
• 调试技巧：可以先单独输出$jsonData查看格式是否正确，比如echo $jsonData;，确认数据结构符合预期后再传给图表。

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