从数据库取数据生成Google饼图无输出，请求代码排查修复

已成功连接数据库，从services表获取数据并转换为JavaScript变量pie1，但Google Charts饼图绘制代码无输出。最初的drawChart函数存在语法错误（循环条件错误、parseInt括号不匹配），修正为draw_my_chart后仍无效，附上完整代码请协助排查：

PHP代码 #

<?php session_start();
    include_once 'connection.php';
    $query= "SELECT * FROM users";
    $result= mysqli_query($con, $query);

    //...data for pie chart...
    $query2 ="SELECT * FROM services";
    $step= $con -> prepare($query2);

    if ($step->execute()) {
        $resultSet= $step->get_result();
        $data= $resultSet->fetch_all(MYSQLI_ASSOC);
        print_r($data);


        echo "<script>\n        var pie1=".json_encode($data)."\n        </script>";

    }else{
        print_r($step->errorinfo());
    }

 ?>

JS绘制代码 #

<script>
  google.charts.load("current", {"packages":["corechart"]});
  google.charts.setOnLoadCallback(draw_my_chart);
  function draw_my_chart() {
    var data = new google.visualization.DataTable();
        data.addColumn('string', 'service');
        data.addColumn('number', 'score');
    for (i = 0; i<pie1.length; i++)
        data.addRow([pie1[i][0],parseInt(pie1[i][1])]);

    var options = {
      title: 'My Daily Activities',
      pieHole: 0.4,
    };

    var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
    chart.draw(data, options);
  }
</script>

DOM结构 #

<body>
<div class="chart-area">
        <canvas id="Services"></canvas>
    <div id="donutchart" style="width: 300px; height: 200px; margin-top: -110px;">
  </div>
</body>

• 数据格式不匹配：PHP用MYSQLI_ASSOC获取的是关联数组，转JSON后pie1是对象数组，JS里用pie1[i][0]、pie1[i][1]无法取值，需替换为实际字段名，比如pie1[i].service、pie1[i].score（对应你services表的字段）
• 变量加载顺序：确保PHP输出的<script>标签在JS绘制代码之前加载，否则draw_my_chart执行时pie1未定义
• 控制台报错检查：打开浏览器F12控制台，查看是否存在pie1 is undefined、数据转换失败等报错信息
• DOM元素加载时机：可将绘制代码嵌套进window.onload事件，避免执行时donutchart元素未渲染完成
• 数据有效性验证：确认services表中对应数值字段存在有效数据，parseInt转换失败会导致图表无数据

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