Question

对于上下文，我尝试构建一个页面，显示当天所有活跃体育游戏的Google图表。数据源将通知有多少（在我的下面的示例中，有3个游戏正在进行中。）从那里，我想循环遍历游戏集，使用jQuery为每个游戏创建一个div，然后放置一个谷歌图表进入每个div。这是我写的：

这将来自数据Feed：

var activeGames = 3;

循环活动游戏，为每个游戏构建一个图表

for (i = 0; i < activeGames; i++){

  $('.chartContainer').append("<div id='game'></div>");

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

  function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Team A');
  data.addColumn('number', 'Team B');

  data.addRows([1,1]);
    //chart data redacted, would come from data feed


  var options = {
    //chart options redacted, irrelevant
  };

  var chart = new google.visualization.LineChart(document.getElementById('game'));
  chart.draw(data, options);
}

相关基础：

适当地链接到HTML中的jQuery
我的HTML文件基本上只是chartContainer类的一个div

如果我在html文件中创建 div id =＆＃39; g1＆＃39; ，图表会显示正常，但由于某种原因，当jquery创建div时，不会显示图表，即使div已经创建了。

感谢任何帮助。

更新：以下是有效的：

加载Google图表包

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

调用函数，for循环进入：

function drawChart() {

    var activeGames = 3;

    for (i = 0; i < activeGames; i++){
        $('.container').append("<div id='g" + i + "'></div>");

    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Team A');
    data.addColumn('number', 'Time');
    data.addRows([1,1]]); //redacted the rest
    var options = {};//redacted

    var chart = new google.visualization.LineChart(document.getElementById('g'+ i));
  chart.draw(data, options);
};

};

Answer 1

首先加载谷歌，等待callback，然后绘制图表......

每页加载只需要调用

google.charts.load

每张图表都不需要load

因为您要为每个图表创建新的<div>，所以创建div并将其传递给图表的构造函数
无需分配id，无论如何都需要是唯一的

请参阅以下工作代码段...

google.charts.load('current', {
  callback: drawCharts,
  packages: ['corechart']
});

function drawCharts() {
  var activeGames = 3;

  for (i = 0; i < activeGames; i++){

    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Team A');
    data.addColumn('number', 'Team B');
    data.addRow([1,1]);

    var options = {
    };

    var container = document.createElement('div');
    $('.chartContainer').append(container);

    var chart = new google.visualization.LineChart(container);
    chart.draw(data, options);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="chartContainer"></div>

Answer 2

部分问题是id对于页面应该是唯一的。因此，在创建div时，您应该将其设为唯一：

$('.chartContainer').append("<div id='game" + i + "'></div>");

然后，在选择div时，请选择正确的div：

var chart = new google.visualization.LineChart(document.getElementById('game' + i));

如何在我刚刚使用jQuery附加的新元素中创建Google图表？

2 个答案: