Question

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

我创建了一个返回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 + '%' %>"
});

你的ajax window.onload可能已经触发了{p> success，因此将其移出该功能。

Answer 2

Try writing the contents of the window.onload = function() { // } just after the barchartData variable is defined. You don't need the window.onload thing here. Your code will probably look like this:

$(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 + '%' %>"
            });
    });
});

数组值未传递给插件

2 个答案: