如何用JavaScript解析外部JSON（PHP生成）填充Google Charts

我来帮你搞定用外部JSON数据替换Google Charts静态数据的问题！下面是一步步的实现方案，完全适配你当前的代码场景：

首先得确认你的PHP接口输出的JSON格式，必须和Google Charts要求的数组嵌套数组结构匹配——也就是第一个子数组是表头，后面的子数组是对应的数据行，就像你之前写的静态数据那样。

第一步：确保PHP输出正确的JSON格式 #

你的PHP脚本要直接输出纯JSON，不要带任何多余的HTML、警告或调试信息。示例PHP代码如下：

<?php
// 假设你从数据库/传感器获取到了真实数据
$sensorData = [
    ["Time", "Temperature", "Humidty"],
    ["2018-03-09 13:28:49", 1000, 400],
    ["2018-03-09 13:28:59", 1170, 460],
    // 更多历史数据...
];

// 设置正确的响应头，避免解析错误
header('Content-Type: application/json');
// 如果是跨域场景，需要添加CORS头（开发环境可用*，生产环境请指定具体域名）
// header('Access-Control-Allow-Origin: *');

echo json_encode($sensorData);
?>

把这个文件存成data.php，访问它应该能看到纯净的JSON结构，没有其他多余内容。

第二步：修改前端代码，AJAX请求JSON数据 #

这里提供两种常用实现方式，选你顺手的就行：

方式1：原生Fetch API（无需依赖jQuery） #

直接修改你的drawChart函数，先请求数据再渲染图表：

function drawChart() {
    // 替换成你的PHP接口地址，比如'./data.php'
    fetch('data.php')
        .then(response => response.json())
        .then(jsonData => {
            // 把JSON数据直接转成Google Charts需要的DataTable
            const data = google.visualization.arrayToDataTable(jsonData);

            // 保留你原来的图表配置（可以按需修改）
            const options = {
                title: '温湿度监测数据',
                curveType: 'function',
                legend: { position: 'bottom' }
            };

            // 初始化并绘制图表
            const chart = new google.visualization.LineChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        })
        .catch(error => {
            console.error('加载数据失败:', error);
        });
}

// 记得保留Google Charts的加载逻辑
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

方式2：jQuery的$.getJSON（如果项目已用jQuery） #

如果你的页面已经引入了jQuery，这样写更简洁：

function drawChart() {
    $.getJSON('data.php', function(jsonData) {
        const data = google.visualization.arrayToDataTable(jsonData);
        
        const options = {
            title: '温湿度监测数据',
            curveType: 'function',
            legend: { position: 'bottom' }
        };

        const chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    })
    .fail(function() {
        console.error('数据加载出错，请检查接口');
    });
}

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

关键注意事项 #

• 数据类型要准确：确保PHP里的温度、湿度是数字类型（不是字符串），json_encode()会自动保留类型，这样Google Charts才能正确渲染数值图表。
• 跨域问题处理：如果前端页面和PHP接口不在同一个域名下，必须在PHP端添加CORS头（上面示例里注释的那行），否则会被浏览器拦截请求。
• 接口调试：如果加载失败，先直接访问PHP接口地址，检查返回的JSON是否合法，可以用浏览器控制台的Network面板查看请求状态和返回内容。

这样替换后，你的Google Charts就能动态加载PHP生成的JSON数据啦！

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