首页 文章

每个循环都包含多个Google Charts

提问于
浏览 次
0

我使用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

2 回答

  • 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 .

    回复于
  • 0

    谢谢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);
    回复于

相关问题