在for循環中創建多個圖表

Question

我想顯示一個圖表，如果我從服務器獲得的答案是數字，則會加載每個問題。問題是我只能在最後一個問題上顯示圖表。任何想法如何顯示一個圖表每個問題？提前致謝。

function chooseSurv(number, name) { 
    var j = number; 
    var question = new Array(); 
    question = survQuestions[j]; 
    var questionType = new Array(); 
    questionType = survType[j]; 
    var outputans = ""; 
    var outputchart = ""; 
    var SurveyAnswer = Parse.Object.extend("someclass); 
    var query = new Parse.Query(SurveyAnswer); query.descending("createdAt"); query.include("author"); query.include("survey"); query.equalTo("survey", somestring); query.find({ 
    success: function(results) { 
     for (var u = 0; u < question.length; u++) { 
     var questions = question[u]; 
     outputans += '<div id="ansbox">'; 
     if (questionType[u]/1) { 
      var divid = "chart_div" + j + u; 
      console.log(divid); 
      outputans += '<div id="' + divid + '" class="chart-box"></div>'; 
      outputans += '</div>'; 
      for (var k in results) { 
      var answer = results[k].get("data")[u]; 
      var author = results[k].get("author"); 
      var name = author.get("name"); 
      outputans += '<h4>' + name + '</h4>'; 
      outputans += '<p>' + answer + '</p>'; 
      outputans += '</div>'; 
      } 
      // Load the Visualization API and the corechart package. 
      google.charts.load('current', { 
      'packages': ['corechart'] 
      }); 
      // Set a callback to run when the Google Visualization API is loaded. 
      google.charts.setOnLoadCallback(drawChart); 
      // Callback that creates and populates a data table, 
      // instantiates the pie chart, passes in the data and 
      // draws it. 
      function drawChart() { 
      // Create the data table. 
      var data = new google.visualization.DataTable(); 
      data.addColumn('string', 'Topping'); 
      data.addColumn('number', 'Slices'); 
      data.addRows([ 
       ['Mushrooms', 3], 
       ['Onions', 1], 
       ['Olives', 1], 
       ['Zucchini', 1], 
       ['Pepperoni', 2] 
      ]); 
      // Set chart options 
      var options = { 
       'title': 'How Much Pizza I Ate Last Night', 
       'width': 400, 
       'height': 300 
      }; 
      // Instantiate and draw our chart, passing in some options. 
      var chart = new google.visualization.PieChart(document.getElementById(divid)); 
      chart.draw(data, options); 
      console.log(divid); 
      } 
     } else { 

Answer 1

的真正的答案就在這裏 - >JavaScript closure inside loops – simple practical example ...

基本上divid改變每個循環。完成後，指向u的最後一個版本。
該圖表功能，那麼嘗試使用...

---

幾種方法可以避免，但有點重組應該做的伎倆......

第一：google.charts.load和setOnLoadCallback被設計成被

不是每一次運行每個頁面加載一次圖表應繪製

試裝車谷歌，然後再與其餘

繼續取下瓶蓋，或功能，從success - 應糾正問題

看到下面的代碼片段...

// Load the Visualization API and the corechart package. 
google.charts.load('current', { 
    // Set a callback to run when the Google Visualization API is loaded. 
    'callback': chooseSurv, 
    // Set packages to use 
    'packages': ['corechart'] 
}); 

function chooseSurv(number, name) { 
    var j = number; 
    var question = new Array(); 
    question = survQuestions[j]; 
    var questionType = new Array(); 
    questionType = survType[j]; 
    var outputans = ""; 
    var outputchart = ""; 
    var SurveyAnswer = Parse.Object.extend("someclass); 
    var query = new Parse.Query(SurveyAnswer); query.descending("createdAt"); query.include("author"); query.include("survey"); query.equalTo("survey", somestring); query.find({ 
    success: function(results) { 
     for (var u = 0; u < question.length; u++) { 
     var questions = question[u]; 
     outputans += '<div id="ansbox">'; 
     if (questionType[u]/1) { 
      var divid = "chart_div" + j + u; 
      console.log(divid); 
      outputans += '<div id="' + divid + '" class="chart-box"></div>'; 
      outputans += '</div>'; 
      for (var k in results) { 
      var answer = results[k].get("data")[u]; 
      var author = results[k].get("author"); 
      var name = author.get("name"); 
      outputans += '<h4>' + name + '</h4>'; 
      outputans += '<p>' + answer + '</p>'; 
      outputans += '</div>'; 
      } 

      var data = new google.visualization.DataTable(); 
      data.addColumn('string', 'Topping'); 
      data.addColumn('number', 'Slices'); 
      data.addRows([ 
      ['Mushrooms', 3], 
      ['Onions', 1], 
      ['Olives', 1], 
      ['Zucchini', 1], 
      ['Pepperoni', 2] 
      ]); 
      // Set chart options 
      var options = { 
      'title': 'How Much Pizza I Ate Last Night', 
      'width': 400, 
      'height': 300 
      }; 
      // Instantiate and draw our chart, passing in some options. 
      var chart = new google.visualization.PieChart(document.getElementById(divid)); 
      chart.draw(data, options); 
      console.log(divid); 
     } else { 

---

note：callback可以放在load聲明中

個

圖表可以隨時抽出，一旦callback被稱爲

這callback可用於代替 ...

$(document).ready(function(){});

- 和/或 -

window.addEventListener('load', function() {}, false);