求助：Google Charts折线图显示混乱问题排查

核心问题分析 #

你的折线图显示混乱主要源于两个关键错误：

1. X轴数据类型不匹配：将时间数据声明为number类型，但气象站的时分格式（如08:30）无法被解析为有效数字，导致图表无法正确识别时间顺序，渲染逻辑混乱。
2. 数组语法不规范：PHP循环生成数据行时，末尾会多出一个逗号，可能引发JS数组解析异常（部分环境下会忽略，但Google Charts对数据格式要求严格）。

修复步骤 #

1. 修正数据列类型

将X轴的number类型改为Google Charts专门用于时间处理的datetime类型：

data.addColumn('datetime', 'Time'); // 替换原有的data.addColumn('number', 'X');
data.addColumn('number', 'Temperature');

2. 规范时间数据格式

将PHP输出的时分字符串转换为JS可识别的Date对象（假设你的$dtemp['time']是HH:MM格式），同时避免末尾多余逗号：

data.addRows([
    <?php
    $chartRows = [];
    foreach($daily_temperature_array as $dtemp) {
        // 拆分时间为小时和分钟
        list($hour, $minute) = explode(':', $dtemp['time']);
        // 生成符合要求的Date对象行（用0年0月0日仅表示当日时间）
        $chartRows[] = "[new Date(0, 0, 0, {$hour}, {$minute}), {$dtemp['temp']}]";
    }
    // 用implode拼接，自动避免末尾逗号
    echo implode(',', $chartRows);
    ?>
]);

3. 优化时间轴显示

在options中配置时间轴的显示格式，让标签更清晰：

var options = {
    hAxis: {
        title: 'Time',
        format: 'HH:mm' // 匹配你的时间显示需求
    },
    vAxis: {
        title: 'Temperature'
    }
};

完整修复后代码 #

google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBasic);

function drawBasic() {
    var data = new google.visualization.DataTable();
    data.addColumn('datetime', 'Time');
    data.addColumn('number', 'Temperature');

    data.addRows([
        <?php
        $chartRows = [];
        foreach($daily_temperature_array as $dtemp) {
            list($hour, $minute) = explode(':', $dtemp['time']);
            $chartRows[] = "[new Date(0, 0, 0, {$hour}, {$minute}), {$dtemp['temp']}]";
        }
        echo implode(',', $chartRows);
        ?>
    ]);

    var options = {
        hAxis: {
            title: 'Time',
            format: 'HH:mm'
        },
        vAxis: {
            title: 'Temperature'
        }
    };

    var chart = new google.visualization.LineChart(document.getElementById('temperaturechart'));
    chart.draw(data, options);
}

额外检查：确保$dtemp['temp']是纯数字格式，没有字符串或空值，否则也会导致图表渲染异常。

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