forループの中に複数のグラフを作成する

Question

私はサーバーから得た回答が数字の場合に読み込まれる質問ごとに1つのグラフを表示しようとしています。問題は、最後の質問にチャートを表示することしかできないことです。 1つの質問ごとに1つのチャートを表示する方法のアイデアですか？前もって感謝します。

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 { 

---

注：callbackは、loadステートメントに入れることができます

の

チャートはcallbackが

このcallbackと呼ばれていたら... 代わりの使用することができ、いつでも

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

描画することができます - および/または -

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