如何在我剛剛使用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));