Google Line Chart仅显示单值无折线，PHP+MySQL可视化问题求助

一、先确认PHP端（index.php）的数据输出是否合规 #

• 验证MySQL查询结果：在index.php里用var_dump($查询结果数组)直接打印，确认是否返回了多组有效TTIME数据，排除查询语句本身只返回单条数据的问题。
• 输出合法JSON：必须用json_encode()处理数据数组，同时过滤空值，示例代码：

// 假设查询到的结果存在$rows变量中
$chartData = [['时间', '对应数值']]; // 先定义表头
foreach ($rows as $row) {
    // 过滤TTIME或数值为空的行
    if (!empty($row['TTIME']) && !empty($row['your_value_field'])) {
        // 数值转成浮点型避免格式错误，时间保持字符串格式
        $chartData[] = [$row['TTIME'], (float)$row['your_value_field']];
    }
}
// 设置响应头为JSON格式，避免解析错误
header('Content-Type: application/json');
echo json_encode($chartData);
exit;

• 直接访问index.php，查看返回的JSON结构是否类似：[["时间","对应数值"],["2024-05-01",15],["2024-05-02",22]]，确保没有空数组元素或语法错误。

二、检查JS端（test.php）的数据处理逻辑 #

• 打印获取到的数据：在AJAX回调里用console.log(data)查看控制台输出，确认数据是完整的数组，没有丢失或格式错误：

fetch('index.php')
.then(res => res.json())
.then(data => {
    console.log(data); // 打开F12控制台看这里的输出
    google.charts.load('current', {'packages':['line']});
    google.charts.setOnLoadCallback(() => drawChart(data));
})
.catch(err => console.error('数据获取失败:', err));

function drawChart(rawData) {
    // 再次过滤空值，双重保险
    const filteredData = rawData.filter(row => row[0] && row[1] && !isNaN(row[1]));
    const chartData = google.visualization.arrayToDataTable(filteredData);
    const options = {
        title: 'TTIME趋势图',
        curveType: 'function',
        legend: { position: 'bottom' }
    };
    const chart = new google.charts.Line(document.getElementById('chart_div'));
    chart.draw(chartData, google.charts.Line.convertOptions(options));
}

• 确保TTIME格式能被Google Chart识别：如果是时间戳，要转成YYYY-MM-DD或HH:MM:SS这类字符串格式，避免Chart无法解析导致只显示单个值。

三、常见问题排查点 #

• 空值问题：检查MySQL表中TTIME字段是否存在NULL值，或者查询条件（比如日期范围）是否错误过滤了大部分数据。
• 单个值问题：要么是PHP查询只返回了一条数据，要么是JS处理时循环逻辑错误（比如覆盖了数组而不是追加），或者JSON输出时只处理了最后一行数据。
• 查看浏览器控制台报错：按F12打开控制台，检查是否有JSON解析错误、Google Chart加载失败或DOM元素找不到的报错信息。

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