javascript - 数组值未传递给插件

Question

我正在使用Chart.js插件在我的网站中显示一些数据，但我正在读取文件，并且数组中的值没有传递给插件。这是我的代码的工作原理，

1. 我创建了一个返回 JSON 值的 WebService。
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

尝试改变

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 当您的 ajax 成功 时可能已经触发，因此将其移出该函数。