Question

我使用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）绘制;制作第二张图表。有没有办法在循环中执行此操作？

Answer 1

您需要循环遍历.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。

Answer 2

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

if let myAnswer = (bigArray[1] as NSDictionary).valueForKey("person"){
  print(myAnswer)
}

每个循环都包含多个Google Charts

2 个答案: