使用JQuery获取JSON数据并映射到图表时出现未定义错误

核心问题1：AJAX异步执行导致图表初始化过早 #

AJAX请求是异步操作，你的图表初始化代码写在AJAX请求外部，会先于success回调执行。此时chartBar5Labels和chartBar5Data还是空数组，自然无法加载数据。

核心问题2：JSON数据可能未被正确解析 #

如果PHP返回JSON时没有设置响应头Content-Type: application/json，jQuery不会自动将响应数据解析为JSON对象，会导致data.content无法访问。

额外问题：测试索引越界 #

你的PHP返回的content数组仅包含2个元素，索引为0和1，测试alert(chartBar5Labels[2])本身就会返回undefined——这个位置根本没有数据。

修改后的代码 #

$(function(){
    // 数据数组
    var chartBar5Labels = [];
    var chartBar5Data   = [];

    $.ajax({
        type:'GET',
        url: './dash_x.php',
        data:{dc:110},
        dataType: 'json', // 强制指定返回类型为JSON，确保数据被正确解析
        success: function (data) {
            jQuery.each(data.content,function(i,item){
                chartBar5Labels.push(item.si); // 用push更安全，避免索引错位
                chartBar5Data.push(item.qi); 
            }); 
            // 数据加载完成后再初始化图表
            initChart();
        },
        error: function(xhr, status, error) {
            // 增加错误日志，方便排查请求问题
            console.log('AJAX请求出错:', error);
        }
    });   

    // 封装图表初始化逻辑
    function initChart() {
        var ctx3 = document.getElementById('chartBar5').getContext('2d');
        new Chart(ctx3, {
            type: 'bar',
            data: {
                labels: chartBar5Labels,
                datasets: [{
                    data: chartBar5Data,
                    backgroundColor: ['#aa9e9e', '#f1f1f1','#f1f1f1','#f10075','#aa9e9e','#f10075']
                } ]
            },
            options: {
                maintainAspectRatio: false,
                legend: {
                    display: false,
                    labels: {
                        display: false
                    }
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero:true,
                            fontSize: 11,
                        }
                    }],
                    xAxes: [{
                        ticks: {
                            beginAtZero:true,
                            fontSize: 11,
                            max: 180
                        }
                    }]
                }
            }
        });
    }
})        

关键修改说明 #

• 新增dataType: 'json'：强制jQuery将响应解析为JSON对象，避免因响应头缺失导致的解析失败。
• 图表初始化移至success回调：确保只有当数据加载完成后，才会渲染图表。
• 使用push()添加元素：比直接指定索引更稳妥，避免出现索引不连续的问题。
• 增加错误处理：方便排查AJAX请求本身的问题（比如路径错误、PHP报错等）。

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