如何在我刚刚使用 jQuery 附加的新元素中创建 google-chart？

Question

就上下文而言，我正在尝试构建一个页面，以显示当天所有活跃体育比赛的谷歌图表。数据馈送将告知有多少（在我下面的示例中，正在进行 3 场比赛。）从那里，我想循环通过一组游戏，使用 jQuery 为每个游戏创建一个 div，然后放置一个谷歌图表进入每个 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 由 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

先加载google，等待callback，然后绘制图表...

google.charts.load每次页面加载只需要调用一次

每个图表都不需要load

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

请参阅以下工作 sn-p...

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