数组值未传递给插件

Question

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

我创建了一个 returns 一个 JSON 值的 WebService。
代码将读取 JSON，将其字符串化并解析。
将读取 obj 中的值并使用这些值创建一个数组。
数组中的值将传递给插件这是我遇到问题的地方

只是让您知道第 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 success 时已经触发，因此请将其移出该函数。

Answer 2

尝试在定义 barchartData 变量后写入 window.onload = function() { // } 的内容。你在这里不需要 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 + '%' %>"
            });
    });
});

数组值未传递给插件

Array value is not being passed to the plugin

javascript

arrays

jquery

json

chart.js