Highcharts+PHP单X轴多Y轴数据可视化无显示问题求助

我用PHP从MySQL读取DHT11采集的温湿度数据，想要实现X轴为月份、Y轴同时展示温度和湿度的Highcharts图表。目前X轴仅显示一个月份，温湿度数据完全不展示，数据表格也为空。我已经将数据整理成按月份分组的JSON结构，编写了PHP与Highcharts的整合代码，但图表渲染失败。此前单日期对应单数据的方式可以正常显示，换成月份聚合就失效了。

当前JSON数据结构（按月份分组） #

{
  "2024-05": {
    "temperature": [22.5, 23.1, 22.8],
    "humidity": [60, 62, 58]
  }
}

完整代码 #

PHP 数据处理部分 #

<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "sensor_data";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

$sql = "SELECT DATE_FORMAT(created_at, '%Y-%m') as month, temperature, humidity FROM dht11_data";
$result = $conn->query($sql);

$monthlyData = [];
while($row = $result->fetch_assoc()) {
    $month = $row['month'];
    if (!isset($monthlyData[$month])) {
        $monthlyData[$month] = ['temperature' => [], 'humidity' => []];
    }
    $monthlyData[$month]['temperature'][] = (float)$row['temperature'];
    $monthlyData[$month]['humidity'][] = (int)$row['humidity'];
}

echo json_encode($monthlyData);
$conn->close();
?>

Highcharts 前端代码 #

<!DOCTYPE html>
<html>
<head>
    <title>温湿度月度统计</title>
    <script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
    <div id="container" style="width: 800px; height: 400px;"></div>
    <script>
        fetch('get_monthly_data.php')
            .then(response => response.json())
            .then(data => {
                const months = Object.keys(data);
                const tempData = months.map(month => data[month].temperature);
                const humiData = months.map(month => data[month].humidity);

                Highcharts.chart('container', {
                    title: { text: '月度温湿度统计' },
                    xAxis: { categories: months },
                    yAxis: [
                        { title: { text: '温度 (℃)' }, min: 0 },
                        { title: { text: '湿度 (%)' }, min: 0, opposite: true }
                    ],
                    series: [
                        { name: '温度', yAxis: 0, data: tempData },
                        { name: '湿度', yAxis: 1, data: humiData }
                    ]
                });
            });
    </script>
</body>
</html>

问题截图 #

排查思路与解决步骤 #

1. 核心问题：数据格式不匹配Highcharts要求 #

Highcharts的series.data仅接受一维数组（单值）或二维数组（x,y坐标对），但你当前的代码把每个月份的所有温度/湿度值作为数组嵌套传入，导致Highcharts无法识别（比如tempData是[[22.5,23.1,22.8]]，不符合要求）。

2. 修正方案1：按月份展示聚合值（如平均值） #

如果需求是展示每个月份的温湿度统计值（比如月度平均），需要先在PHP中计算聚合数据：

// 修改PHP数据处理逻辑，计算月度平均值
$monthlyData = [];
while($row = $result->fetch_assoc()) {
    $month = $row['month'];
    if (!isset($monthlyData[$month])) {
        $monthlyData[$month] = [
            'temp_sum' => 0,
            'temp_count' => 0,
            'humi_sum' => 0,
            'humi_count' => 0
        ];
    }
    $monthlyData[$month]['temp_sum'] += (float)$row['temperature'];
    $monthlyData[$month]['temp_count']++;
    $monthlyData[$month]['humi_sum'] += (int)$row['humidity'];
    $monthlyData[$month]['humi_count']++;
}

// 生成最终聚合数据
$finalData = [];
foreach($monthlyData as $month => $stats) {
    $finalData[$month] = [
        'temperature' => round($stats['temp_sum'] / $stats['temp_count'], 1),
        'humidity' => round($stats['humi_sum'] / $stats['humi_count'], 0)
    ];
}

echo json_encode($finalData);

此时JSON结构变为：

{ "2024-05": { "temperature": 22.8, "humidity": 60 } }

前端代码无需修改，tempData会变成[22.8]，符合Highcharts的要求。

3. 修正方案2：展示月份内的所有原始数据点 #

如果需求是X轴显示具体日期，同时按月份分组展示所有数据，需要调整数据结构为包含日期的原始数据：

// PHP返回带日期的原始数据
$rawData = [];
while($row = $result->fetch_assoc()) {
    $rawData[] = [
        'date' => $row['created_at'],
        'temp' => (float)$row['temperature'],
        'humi' => (int)$row['humidity']
    ];
}
echo json_encode($rawData);

前端代码处理为按月份分组的series：

fetch('get_raw_data.php')
.then(res => res.json())
.then(data => {
    const monthGroups = {};
    data.forEach(item => {
        const month = item.date.split('-').slice(0,2).join('-');
        if (!monthGroups[month]) {
            monthGroups[month] = { temp: [], humi: [] };
        }
        monthGroups[month].temp.push([Date.parse(item.date), item.temp]);
        monthGroups[month].humi.push([Date.parse(item.date), item.humi]);
    });

    const series = [];
    Object.keys(monthGroups).forEach(month => {
        series.push({
            name: `${month} 温度`,
            data: monthGroups[month].temp
        }, {
            name: `${month} 湿度`,
            data: monthGroups[month].humi,
            yAxis: 1
        });
    });

    Highcharts.chart('container', {
        xAxis: { type: 'datetime' },
        yAxis: [
            { title: { text: '温度 (℃)' } },
            { title: { text: '湿度 (%)' }, opposite: true }
        ],
        series: series
    });
});

4. 快速排查技巧 #

• 直接访问PHP接口，查看返回的JSON是否符合预期，有没有语法错误；
• 打开浏览器控制台（F12），查看Console面板是否有JSON解析错误、Highcharts初始化错误；
• 打印前端处理后的tempData和humiData，确认数据格式是否正确。

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