Chart.js无法读取PHP页面返回的数据，请求技术帮助

问题根源 #

你当前PHP返回的数据格式不是标准JSON对象，每个数组元素是类似"mon: 'Jan', cnt: 18"的字符串，而非可直接访问的键值对对象。所以前端循环时data[i].mon会返回undefined，导致Chart.js拿不到有效数据。

解决方案 #

1. 修正PHP代码，返回标准JSON

确保PHP输出符合JSON规范的数据，步骤如下：

• 从数据源（如数据库）获取数据后，组装成关联数组
• 使用json_encode()转换为JSON字符串
• 设置响应头为application/json，让前端自动识别数据类型

示例PHP代码：

<?php
// 假设从数据库查询得到数据
$data = [
    ['mon' => 'Jan', 'cnt' => 18],
    ['mon' => 'Jun', 'cnt' => 18],
    ['mon' => 'Jul', 'cnt' => 18],
    ['mon' => 'Aug', 'cnt' => 18],
    ['mon' => 'Sep', 'cnt' => 18]
];

// 设置响应头，告诉前端这是JSON数据
header('Content-Type: application/json');
// 输出标准JSON
echo json_encode($data);
?>

2. 前端代码优化（可选但推荐）

jQuery的$.post会自动解析application/json类型的响应，也可以明确指定数据类型，避免解析异常：

$(document).ready(function () {
    showGraph();
});

function showGraph() {
    $.post("data.php", function (data) {
        console.log(data);
        var mon = [];
        var cnt = [];

        // 此时data是标准JSON数组，可直接访问属性
        data.forEach(item => {
            mon.push(item.mon);
            cnt.push(item.cnt);
        });

        var chartdata = {
            labels: mon,
            datasets: [
                {
                    label: 'Month',
                    backgroundColor: '#49e2ff',
                    borderColor: '#46d5f1',
                    hoverBackgroundColor: '#CCCCCC',
                    hoverBorderColor: '#666666',
                    data: cnt
                }
            ]
        };

        var graphTarget = $("#graphCanvas");
        var barGraph = new Chart(graphTarget, {
            type: 'bar',
            data: chartdata
        });
    }, 'json'); // 明确指定响应数据类型为JSON
}

验证方法 #

修改后打开浏览器控制台，查看console.log(data)的输出，应该是类似：

[
    {mon: "Jan", cnt: 18},
    {mon: "Jun", cnt: 18},
    {mon: "Jul", cnt: 18},
    {mon: "Aug", cnt: 18},
    {mon: "Sep", cnt: 18}
]

此时item.mon和item.cnt能正确获取值，Chart.js即可正常渲染图表。

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