Javascript 谷歌图表不在循环中打印

我必须在循环中显示谷歌图表。如果没有循环，我的图表可以正常工作，但是当我尝试在循环中添加它时，我只在第一次迭代中得到它，我如何修复它，请查看这个

<script type="text/javascript">
          google.load("visualization", "1", {packages:["corechart"]});
          google.setOnLoadCallback(drawChart);
          function drawChart() {

            var data = google.visualization.arrayToDataTable([
              ['Task', 'Daily Report'],
              ['Points Achieved',     <?php echo $points_achieved?>],
              ['Points Left',         <?php echo $points_left?>]
            ]);

            var options = {
             backgroundColor: 'transparent',
              title: '' ,
              chartArea:{right:0,top:0,width:"90%",height:"100%" }        
              ,height: 150
              ,width: 200,
             };

            var chart = new google.visualization.PieChart(document.getElementById('piechart'));

            chart.draw(data, options);
          }
        </script>


<?php
     $sql= "SELECT * FROM employees";
     $query= mysqli_query($connection, $sql);
    while($res= mysqli_fetch_assoc($query)): ?>

<div id='piechart'></div>
//other data from database comes here 

<?php endwhile;?>

load（“可视化”、“1”、{packages:[“corechart”]}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
[“任务”、“每日报告”]，
[‘得分’，]，
[‘左点’，]
]);
变量选项={
背景色：“透明”，
标题：“”，
图表区域：{右侧：0，顶部：0，宽度：“90%”，高度：“100%”
，身高：150
，宽：200，
};
var chart=new google.visualization.PieChart（document.getElementById（'PieChart'）；
图表绘制（数据、选项）；
}
//来自数据库的其他数据来自这里

由于您正在绘制多个图表，我建议修改

drawChart

函数以接受图表id和数据作为参数：

function drawChart(chartId,data) {
    var dataTable = google.visualization.arrayToDataTable(data);
    var options = {
         backgroundColor: 'transparent',
         title: '' ,
         chartArea:{right:0,top:0,width:"90%",height:"100%" },
         height: 150
        ,width: 200,
    };
    var chart = new google.visualization.PieChart(document.getElementById(chartId));
    chart.draw(dataTable, options);
}

然后可以迭代PHP数组并调用

drawChart

函数：

<?php
foreach ($reports as $key => $report) {
    $chartId = "piechart_$key";
    //prepare chart data
    $chartData = array(
        array("Task", "Daily Report"),
        array("Points Achieved" , $report["Points Achieved"]),
        array("Points Left" , $report["Points Left"])
    ); 


?>
  <div id='<?php echo $chartId; ?>'></div> 
  <script type="text/javascript">drawChart('<?php echo $chartId; ?>',<?php echo json_encode($chartData); ?>)</script>
<?php
}
?>

//input data example ( replace it with data retrieved from DB)
$reports = array(
    "R1" => array("Points Achieved" => 20, "Points Left" => 4),
    "R2" => array("Points Achieved" => 40, "Points Left" => 14),
    "R3" => array("Points Achieved" => 10, "Points Left" => 0)
);