在for循環中繪制多個Google圖表

Question

我正在嘗試在for循環中繪制多個Google圖表，但似乎無法使其正常工作。 我看到有人問過類似的問題，但僅限於PHP。 誰能幫忙？ 到目前為止，這是我嘗試過的內容https://jsfiddle.net/8nfbz1v1/

        <ul id="draw-charts"></ul>

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

for(var i = 0; i>6; i+){
var charts = "";
    google.charts.setOnLoadCallback(drawChart);

  function drawCharts() {

  charts += '<td><div id="chart_div' + i +'" style="border: 1px solid #ccc"></div></td>';
  $("#draw-charts").html(charts);

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addRows([
      ['Mushrooms', 1],
      ['Onions', 1],
      ['Olives', 2],
      ['Zucchini', 2],
      ['Pepperoni', 1]
    ]);

    var options = {title:'How Much Pizza Sarah Ate Last Night',
                   width:400,
                   height:300};

    // Instantiate and draw the chart for Sarah's pizza.
    var chart = new google.visualization.PieChart(document.getElementById('chart_div' + i));
    chart.draw(data, options);
  }
}

Answer 1

每個頁面加載一次只能調用一次setOnLoadCallback

觸發后，您可以根據需要繪制任意數量的圖表

您還可以在load語句中包含callback

請參閱以下工作片段...

 google.charts.load('current', { callback: function () { var data = new google.visualization.DataTable(); data.addColumn('string', 'Topping'); data.addColumn('number', 'Slices'); data.addRows([ ['Mushrooms', 1], ['Onions', 1], ['Olives', 2], ['Zucchini', 2], ['Pepperoni', 1] ]); var options = { title:'How Much Pizza Sarah Ate Last Night', width:400, height:300 }; for (var i = 0; i < 6; i++) { var container = document.getElementById('draw-charts').appendChild(document.createElement('div')); var chart = new google.visualization.PieChart(container); chart.draw(data, options); } }, packages: ['corechart'] }); 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <ul id="draw-charts"></ul>