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

Question

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

这将来自数据馈送：

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 ='g1' ，则图表显示正常，但是由于某种原因，即使通过div创建了div，通过jquery创建div时也不会显示任何图表。

任何帮助表示赞赏。

---

更新：这是起作用的：

加载谷歌图表包

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));