每个循环中有多个 Google 图表答案

【问题标题】：Multiple Google Charts in for each loop每个循环中有多个 Google 图表
【发布时间】：2016-06-29 12:22:18
【问题描述】：

我已使用 Facebook Graph API 来获取活动页面上的参加人数和感兴趣人数。我想将这些放在图表中，但我无法使用 Google Charts 绘制多个饼图。

我可以毫不费力地将数据引用到 div，因为它显示了一个饼图，其中仅显示了一个事件的正确数据，如下所示：http://charlottebijl.nl/event-charts/

我已将 API 中的数据放入 div 的 HTML 数据属性中，因此我可以只编写一次此代码并保持代码干净。

<?php

// count the number of events
$event_count = count($obj['data']);

for($x=0; $x<$event_count; $x++){

  $eid = $obj['data'][$x]['id'];
  $name = $obj['data'][$x]['name'];
  $attending_count = isset($obj['data'][$x]['attending_count']) ? $obj['data'][$x]['attending_count'] : "";
  $interested_count = isset($obj['data'][$x]['interested_count']) ? $obj['data'][$x]['interested_count'] : "";
?>

  <script>

    function drawChart() {

      var piechartID = $('.event .piechart').attr('id');
      var attending_count = $('.event').data("attending");
      var interested_count = $('.event').data("interested");
      var capacity = 400;
      var rest_capacity = capacity - (attending_count + interested_count);


      var data = google.visualization.arrayToDataTable([
        ['Bezoekers', 'Aantal'],
        ['Gaan',     attending_count],
        ['Geinteresseerd',      interested_count],
        ['Overige capaciteit',  rest_capacity]
      ]);


      var options = {'title':'Evenement' + piechartID ,
         'width':400,
         'height':300,
      };

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

      chart.draw(data, options);
    }


  </script>

  <div class='col-xs-6'>
    <div class='event' data-id="<?php echo $eid ?>" data-eventcount="<?php echo $x ?>" data-attending="<?php echo $attending_count ?>" data-interested="<?php echo $interested_count ?>">

      <div class="event-header">
        <div class="image" style="background-image:url('<?php echo $pic_big ?>');"></div>
        <b><a href='https://www.facebook.com/events/<?php echo $eid ?>'><?php echo $name ?></a></b>
      </div>

      <div id="<?php echo $eid ?>" class="piechart"></div>


      <ul class="event-info">
        <li><strong>Attending: </strong><?php echo $attending_count ?></li>
        <li><strong>Interested: </strong><?php echo $interested_count ?></li>
      </ul>

    </div>
</div>

   //end of php for each
   <?php } ?>

在页面底部我有这段代码，它将执行绘图功能

  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

我研究并发现你必须制作一个 var data2 和 var options2 以便你可以使用 chart.draw(data2, options2);制作第二张图表。有没有办法在循环中做到这一点？

【问题讨论】：

标签： javascript for-loop charts foreach google-visualization

【解决方案1】：

感谢 Cas，在这里得到了工作代码：

google.charts.load('current', {'packages':['corechart']});  

    var charts = {
        init: function() {
            var self = this;
            $('.event').each(function() {
                console.log('event');
                var $this = $(this);
                charts.draw($this.data('attending'), $this.data('interested'), $this.data('eventname'), $this.data('id'));
            })
        },
        draw: function(attending, interested, eventname, id) {

            var piechartID = $('.event .piechart').attr('id');

            var capacity = 400;
            var rest_capacity = capacity - (attending + interested);
            var data = google.visualization.arrayToDataTable([
              ['Bezoekers', 'Aantal'],
              ['Gaan',     attending],
              ['Geinteresseerd',      interested],
              ['Overige capaciteit',  rest_capacity]
            ]);

            var options = {'title': eventname,
               'width':400,
               'height':300,
            };

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

            chart.draw(data, options);
        }
    }  

    google.charts.setOnLoadCallback(charts.init);

【讨论】：

【解决方案2】：

您需要像这样遍历.event 元素：

var charts = {
    init: function() {
        var self = this;
        $('.event').each(function() {
            var $this = $(this);
            self.draw($this.data('attending'), $this.data('interested'));
        })
    },
    draw: function(attending, interested) {
        // Your drawChart function
    }
}

// charts.init(); // Draw them if you want to

您现在可以将charts.init 用于setOnLoadCallback。

【讨论】：