无法显示Google Chart：学生成绩柱状图加载失败求助

我帮你排查了代码里的几个关键问题，这些都是导致图表无法渲染的核心原因，下面逐个说明并给出修正方案：

1. HTML元素ID语法错误 #

你的图表容器div的ID引号写反了，导致JS无法定位到这个渲染元素：

<!-- 错误写法 -->
<div id=chart-area" style="width:1000px;height:620px;"></div>

<!-- 修正后 -->
<div id="chart-area" style="width:1000px;height:620px;"></div>

2. Google Charts初始化错误 #

google.charts.setOnLoadCallback(); 是空调用，必须确保API加载完成后再执行图表绘制逻辑，建议绑定一个初始化函数（哪怕是空函数，也能保证API就绪）：

google.charts.load('current',{packages:['corechart','bar']});
// 修正：传递空函数确保API加载完成后再执行后续逻辑
google.charts.setOnLoadCallback(function() {});

3. fetch.php中的PHP语法错误 #

这部分是AJAX获取数据的核心，存在多处致命错误：

• mysqli_query缺少连接参数：必须传递数据库连接对象才能执行查询
• 数组变量引用缺失$符号：PHP变量必须以$开头，否则会被识别为常量
• 循环逻辑错误：$j没有递增会导致无限循环，且单个学生的成绩应该只取一行数据
• JSON输出错误：直接echo数组会输出字符串"Array"，必须用json_encode转换为标准JSON格式

修正后的fetch.php：

<?php
$output = [];
include('dbc.php');
if(isset($_POST["name"])){
    // 修正：添加数据库连接对象到mysqli_query
    $query = "select * from tblMarks where name='".$_POST["name"]."'";
    $result = mysqli_query($conn, $query);
    
    $handle = fopen("./upload/1.csv","r");
    $fields = fgetcsv($handle);
    $subArr = [];
    $i = 0;
    foreach ($fields as $row){
        if($row != 'Fields'){
            $row = substr($row,0,strpos($row, "~"));
            $subArr[$i] = $row;
            $i++;
        }
    }
    
    // 修正：单个学生对应一行数据，用if代替while避免重复读取
    if($row = mysqli_fetch_array($result)){
        $j = 0;
        // 修正：引用数组时添加$符号，同时递增$j避免无限循环
        while($j < count($subArr)){
            $output[] = array(
                'subject' => $subArr[$j],
                'marks' => floatval($row[$subArr[$j]])
            );
            $j++;
        }
    }
    // 修正：用json_encode输出标准JSON格式数据
    echo json_encode($output);
}
?>

4. JS循环变量名冲突 #

$.each循环里的变量名和外层的jsonData重复，导致数据被覆盖：

// 错误写法
$.each(jsonData, function(i, jsonData){
    var subject = jsonData.subject;
    var marks = parseFloat($.trim(jsonData.marks));
    data.addRows([[subject, marks]])
});

// 修正后：更换循环变量名避免冲突
$.each(jsonData, function(i, item){
    var subject = item.subject;
    var marks = parseFloat($.trim(item.marks));
    data.addRows([[subject, marks]])
});

5. jQuery重复引入冲突 #

页面同时引入了slim版和完整版jQuery，slim版移除了AJAX等核心功能，会导致AJAX请求无法正常工作，建议只保留完整版：

<!-- 删除slim版jQuery及相关依赖 -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<!-- 保留完整版jQuery即可，若需要Bootstrap功能可重新引入完整Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

验证步骤 #

1. 确保数据库tblMarks表的字段名和CSV中提取的科目名完全匹配
2. 打开浏览器开发者工具（F12），查看Console面板是否有报错，Network面板确认AJAX请求返回正确的JSON数据（格式示例：[{"subject":"Math","marks":90},{"subject":"English","marks":85},...]）
3. 选择学生姓名后，检查图表容器是否正常渲染柱状图

完成以上修正后，你的成绩柱状图应该就能正常显示了。

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