谷歌图表没有循环打印

Google chart not getting printed in a loop

本文关键字：循环 打印 谷歌      更新时间：2023-09-26

我必须在循环中显示谷歌图表。没有循环，我的图表可以很好地工作，但当我试图将其添加到循环中时，我只在第一次迭代时得到它，我该如何修复它，请查看此

<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;?>

由于您正在绘制多个图表，我建议修改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
}
?>

假设$reports阵列具有以下结构：

//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)
);

工作示例

相关文章：