Значение массива не передается плагину

Question

Я использую плагин Chart.js, чтобы показать некоторые данные на моем сайте, но я читаю файл, и значение из массива не передается плагину. Вот как работает мой код:

1. Я создал WebService, который возвращает значение JSON.
2. Код будет читать JSON, подстроить его и проанализировать.
3. Значения в obj будут считаны и массив будет создан со значениями.
4. Значение из массива будет передано в плагины Это где я имею вопрос

Просто, чтобы вы знали все до шага 3 работают нормально, его единственный шаг 4, который не работает. Первоначально у меня был этот код, где был прочитан текстовый файл, и этот режим работал нормально, но теперь, когда я использую JSON, он не работает. Пожалуйста, ознакомьтесь со следующим кодом и сообщите мне, видите ли вы какую-либо простую ошибку, которую я создаю, или мне нужно создать отдельный JS-файл для использования плагина. Спасибо

$(document).ready(function() { 
    var deudaColumns = ["deudor_name", "deuda"]; 
    var obj = ""; 
    $.getJSON("getDeuda.php", function(data) { 
     var DeudaArray = []; 
     var json = JSON.stringify(data); 
     obj = jQuery.parseJSON(json); 

     var obj_total = obj.length;   
     for (var i = 0; i < obj_total ; i++) 
     { 
      var lineaHija = []; 
      for (var x = 0; x < deudaColumns.length; x++) { 
       lineaHija.push(obj[i][deudaColumns[x]]); 
      } 
      DeudaArray.push(lineaHija); 
     } 
     console.log(DeudaArray[4][0]); 

     var deudorLabels = []; 
     for (var i = 0; i < DeudaArray.length; i++) 
     { 
      deudorLabels.push(DeudaArray[i][0]); 
     } 

     console.log(deudorLabels); 
     var deudordeudas = []; 
     for (var i = 0; i < DeudaArray.length; i++) 
     { 
      deudordeudas.push(DeudaArray[i][1]); 
     } 
     console.log(deudordeudas[1]); 

     // Bar Chart 
     var barChartData = { 
      labels : [DeudaArray[0][0], DeudaArray[1][0], DeudaArray[2][0], DeudaArray[3][0], DeudaArray[4][0]], 
      datasets : [ 
        { 
         label: "Usuarios Que Tienen Deuda", 
         fillColor : "rgba(12,12,12,0.45)", 
         strokeColor : "rgba(12,12,12,0.65)", 
         highlightFill: "rgba(155,155,155,0.75)", 
         highlightStroke: "rgba(155,155,155,1)", 
         data : [DeudaArray[0][1], DeudaArray[1][1], DeudaArray[2][1], DeudaArray[3][1], DeudaArray[4][1]] 
        } 
       ] 

      }; 
     window.onload = function(){ 
       var ctx = document.getElementById("canvas").getContext("2d"); 
       window.myBar = new Chart(ctx).Bar(barChartData, { 
        responsive : true, 
        scaleFontStyle: "bold", 
        scaleFontFamily: "'Open Sans', 'Helvetica', 'Arial', sans-serif", 
        scaleFontSize: 9, 
        tooltipFontFamily: "'Open Sans', 'Helvetica', 'Arial', sans-serif", 
        scaleShowHorizontalLines: false, 
        scaleShowVerticalLines: false, 
        barValueSpacing : 3, 
        scaleLabel : "<%= value + '%' %>" 
       }); 
     };   
    }); 
}); 

Сообщите мне, если вам нужна дополнительная информация.

Answer 1

изменение Try

window.onload = function(){ 
    var ctx = document.getElementById("canvas").getContext("2d"); 
    window.myBar = new Chart(ctx).Bar(barChartData, { 
     responsive : true, 
     scaleFontStyle: "bold", 
     scaleFontFamily: "'Open Sans', 'Helvetica', 'Arial', sans-serif", 
     scaleFontSize: 9, 
     tooltipFontFamily: "'Open Sans', 'Helvetica', 'Arial', sans-serif", 
     scaleShowHorizontalLines: false, 
     scaleShowVerticalLines: false, 
     barValueSpacing : 3, 
     scaleLabel : "<%= value + '%' %>" 
    }); 
}; 

в

var ctx = document.getElementById("canvas").getContext("2d"); 
window.myBar = new Chart(ctx).Bar(barChartData, { 
    responsive : true, 
    scaleFontStyle: "bold", 
    scaleFontFamily: "'Open Sans', 'Helvetica', 'Arial', sans-serif", 
    scaleFontSize: 9, 
    tooltipFontFamily: "'Open Sans', 'Helvetica', 'Arial', sans-serif", 
    scaleShowHorizontalLines: false, 
    scaleShowVerticalLines: false, 
    barValueSpacing : 3, 
    scaleLabel : "<%= value + '%' %>" 
}); 

window.onload, возможно, уже срабатывает, когда ваш Аякса success, поэтому перемещать его из этой функции.

Answer 2

Попробуйте записать содержимое window.onload = function() { // } сразу после определения переменной barchartData. Здесь вам не нужна вещь window.onload. Ваш код, вероятно, будет выглядеть так:

$(document).ready(function() { 
    var deudaColumns = ["deudor_name", "deuda"]; 
    var obj = ""; 
    $.getJSON("getDeuda.php", function(data) { 
     var DeudaArray = []; 
     var json = JSON.stringify(data); 
     obj = jQuery.parseJSON(json); 

     var obj_total = obj.length;   
     for (var i = 0; i < obj_total ; i++) 
     { 
      var lineaHija = []; 
      for (var x = 0; x < deudaColumns.length; x++) { 
       lineaHija.push(obj[i][deudaColumns[x]]); 
      } 
      DeudaArray.push(lineaHija); 
     } 
     console.log(DeudaArray[4][0]); 

     var deudorLabels = []; 
     for (var i = 0; i < DeudaArray.length; i++) 
     { 
      deudorLabels.push(DeudaArray[i][0]); 
     } 

     console.log(deudorLabels); 
     var deudordeudas = []; 
     for (var i = 0; i < DeudaArray.length; i++) 
     { 
      deudordeudas.push(DeudaArray[i][1]); 
     } 
     console.log(deudordeudas[1]); 

     // Bar Chart 
     var barChartData = { 
      labels : [DeudaArray[0][0], DeudaArray[1][0], DeudaArray[2][0], DeudaArray[3][0], DeudaArray[4][0]], 
      datasets : [ 
        { 
         label: "Usuarios Que Tienen Deuda", 
         fillColor : "rgba(12,12,12,0.45)", 
         strokeColor : "rgba(12,12,12,0.65)", 
         highlightFill: "rgba(155,155,155,0.75)", 
         highlightStroke: "rgba(155,155,155,1)", 
         data : [DeudaArray[0][1], DeudaArray[1][1], DeudaArray[2][1], DeudaArray[3][1], DeudaArray[4][1]] 
        } 
       ] 

      }; 
      var ctx = document.getElementById("canvas").getContext("2d"); 
      window.myBar = new Chart(ctx).Bar(barChartData, { 
       responsive : true, 
       scaleFontStyle: "bold", 
       scaleFontFamily: "'Open Sans', 'Helvetica', 'Arial', sans-serif", 
       scaleFontSize: 9, 
       tooltipFontFamily: "'Open Sans', 'Helvetica', 'Arial', sans-serif", 
       scaleShowHorizontalLines: false, 
       scaleShowVerticalLines: false, 
       barValueSpacing : 3, 
       scaleLabel : "<%= value + '%' %>" 
      }); 
    }); 
});