javascript - 如何在每个帖子上显示谷歌图表

Question

当我在 while 循环中添加谷歌图表时，它只在第一篇文章中显示一次。我想在每个帖子旁边显示谷歌图表。

不幸的是，即使它被添加到 while 循环中，它也不起作用。

这是我的代码:

            <div id="wrapper">

        <?php include "includes/navigation.php"; ?>
        <?php include "../includes/functions.php"; ?>

        <div id="page-wrapper">

            <div class="container-fluid">

                <!-- Page Heading -->
                <div class="row">
                    <div class="col-lg-12">
                        <h1 class="page-header">
                            Statistieken
                            <small><?php echo $_SESSION['username']; ?></small>
                        </h1>

                        <!-- week nav -->
                        <ul class="nav nav-pills">
                          <li role="presentation"><a href="#">Week 1</a></li>
                          <li role="presentation"><a href="#">Week 2</a></li>
                            <li role="presentation"><a href="#">Week 3</a></li>
                        </ul>
                        <!-- einde week nav -->


                        <!-- logboek van user -->

                        <?php 


                        $the_user_id = $_SESSION['user_id'];

                        $query = "SELECT * FROM logboek WHERE logboek_user = $the_user_id LIMIT 3 ";
                        $select_logboek_user = mysqli_query($connection, $query);
                        confirmQuery($select_logboek_user);

                        while($row = mysqli_fetch_assoc($select_logboek_user)){

                            $logboek_image = $row['logboek_image'];
                            $logboek_title = $row['logboek_title'];
                            $logboek_content = $row['logboek_content'];
                            $logboek_date = $row['logboek_date'];
                            $logboek_time = $row['logboek_time'];
                            $logboek_studielastuur = $row['logboek_studielastuur'];


                        ?>

                         <?php

                            echo $logboek_studielastuur;

                            ?>


                          <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

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

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


                      <!-- 2 colum logboek -->    
                      <div class="row">

                          <div class="col-xs-4 col-sm-3">
                              <?php echo '<div id="donutchart" style="width: auto; height: auto;"></div>'; ?>   
                          </div>


                          <div class="col-xs-8 col-sm-3">
                              <img src="images/<?php echo $logboek_image ?>" class="img-responsive" alt="">
                              <h3 class="text-center"><?php echo $logboek_title; ?></h3>
                              <small><?php echo $logboek_date; ?></small>
                              <small><?php echo $logboek_time; ?></small>
                              <p><?php echo $logboek_content; ?></p>
                          </div>

                        </div>
                        <!-- einde 2 colum logboek -->    






<!-- full width logboek
                        <h3 class="text-center"><?php echo $logboek_title; ?></h3>
                        <img src="images/<?php echo $logboek_image ?>" class="img-responsive" alt="">
                        <small><?php echo $logboek_date; ?></small>
                        <small><?php echo $logboek_time; ?></small>
                        <p><?php echo $logboek_content; ?></p>
-->

                        <?php } ?>

                        <!-- einde logboek user -->







                        <nav class="navbar navbar-default navbar-fixed-bottom">
                          <div class="container">
                               <ul class="nav nav-tabs">
                                    <li role="presentation"><a href="aanwezigheid.php"><i class="fa fa-check"></i> Aanwezigheid</a></li>
                                    <li role="presentation"><a href="#"><i class="fa fa-check-square-o"></i> Status</a></li>
                                    <li role="presentation" class="active"><a href="statistieken.php?source=view_all_statistieken"><i class="fa fa-bar-chart"></i> Statistieken</a></li>
                                    <li role="presentation"><a href="statistieken.php?source=add_logboek"><i class="fa fa-book"></i> Logboek</a></li>
                                    <li role="presentation"><a href="statistieken.php?source=add_logboek"><i class="fa fa-calendar"></i> Rooster</a></li>

                    </div>
                              </nav>
                </div>
                <!-- /.row -->

            </div>
            <!-- /.container-fluid -->

        </div>
        <!-- /#page-wrapper -->
<?php include "includes/footer.php"; ?>

这是图像描述:

非常感谢您的帮助!

亲切的问候， 凯文。

Answer 1

您正在使用 getElementById 来定位圆环图的放置位置。问题是应该只有一个元素具有相同的 ID，它们应该是唯一的!确认此规则后，浏览器一旦找到第一个元素，就会停止寻找元素。

您应该为每个帖子使用一个非常唯一的 ID，这样它就会起作用...

由于您的代码太大，我将重现一个小示例:

<?PHP
    foreach($posts as $post){
        echo '<div class="donutchart" id="donutchart_'.$post['id'].'"></div>';
        ?>
        <script>
            var data = theGraphData;
            var chart = new google.visualization.PieChart(document.getElementById('donutchart_<?=$post['id']?>'));
            chart.draw(data, options);
        </script>
    }
?>

基本上，您可以在每个部分的正确 ID 上调用 javascript...还有其他几种方法可以做到这一点，例如直接在元素上添加数据，在绘制完所有内容后，javascript 会查找它们并执行操作工作。另外，请确保不要在每次 foreach 增量时加载 google API...