Question

我试图通过php从mysql数据库获取数据，将其编码为JSON，然后将其解析为一个在条形图中显示数据的数组。

如果我明确声明了值，例如：

var data = new Array ();
data.push ([[5,66],[6,65],[7,68],[8,67],[9,64],[10,68],[11,73],[12,66],[13,70],[14,72],[15,74],[16,75],[17,67],[18,67],[19,39],[20,25]]);

这很有用。

如果我创建一个循环，例如：

var data = new Array ();
var namespacedata = [];
for (var j=5; j<20; j++) {
    namespacedata.push([j,66]);
}
data.push(namespacedata);

这也有效。

如果我在chrome中使用控制台以及一些日志记录，我可以看到传递的数组长度为15个元素：

但是，当我尝试解析我的json数组时，看起来像是来自php：

[{＆＃34; NAMESPACE＆＃34;：＆＃34; 5＆＃34;＆＃34;使用＆＃34;：＆＃34; 66＆＃34;}，{＆＃34; NAMESPACE＆＃34 ;：＆＃34; 6＆＃34;＆＃34;使用＆＃34;：＆＃34; 64＆＃34;}，{＆＃34; NAMESPACE＆＃34;：＆＃34; 7＆＃34;，＆＃34;使用＆＃34;：＆＃34; 68＆＃34;}，{＆＃34; NAMESPACE＆＃34;：＆＃34; 8＆＃34;＆＃34;使用＆＃34;：＆＃34; 67＆＃34;}，{＆＃34; NAMESPACE＆＃34;：＆＃34; 9＆＃34;＆＃34;使用＆＃34;：＆＃34; 64＆＃34;}，{＆＃34; NAMESPACE＆＃34;：＆＃34; 10＆＃34;＆＃34;使用＆＃34;：＆＃34; 67＆＃34;}，{＆＃34; NAMESPACE＆＃34;：＆＃34; 11＆＃34; ＆＃34;使用＆＃34;：＆＃34; 72＆＃34;}，{＆＃34; NAMESPACE＆＃34;：＆＃34; 12＆＃34;＆＃34;使用＆＃34;：＆＃ 34; 67＆＃34;}，{＆＃34; NAMESPACE＆＃34;：＆＃34; 13＆＃34;＆＃34;使用＆＃34;：＆＃34; 70＆＃34;}，{＆＃34 ; NAMESPACE＆＃34;：＆＃34; 14＆＃34;＆＃34;使用＆＃34;：＆＃34; 71＆＃34;}，{＆＃34; NAMESPACE＆＃34;：＆＃34; 15＆＃ 34;，＆＃34;使用＆＃34;：＆＃34; 74＆＃34;}，{＆＃34; NAMESPACE＆＃34;：＆＃34; 16＆＃34;＆＃34;使用＆＃34 ;: ＆＃34; 74＆＃34;}，{＆＃34; NAMESPACE＆＃34;：＆＃34; 17＆＃34;＆＃34;使用＆＃34;：＆＃34; 67＆＃34;}，{＆＃34; NAMESPACE＆＃34;：＆＃34; 18＆＃34;＆＃34;使用＆＃34;：＆＃34; 70＆＃34;}，{＆＃34; NAMESPACE＆＃34;：＆＃34; 19＆＃34;＆＃34;使用＆＃34;：＆＃34; 41＆＃34;}，{＆＃34; NAMESPACE＆＃34;：＆＃34; 20＆＃34;＆＃34;使用＆＃34 ;：＆＃34; 25 ＆＃34;}]

使用此代码：

var data = new Array ();
var namespacedata = [];
$.getJSON("resources/get_namespace_usage.php", function(result) {
    $.each(result, function(i, item) {
        namespacedata.push([Number(item.NAMESPACE),Number(item.used)]);
    });

    console.log(namespacedata);
    data.push(namespacedata);
    console.log(data);
});

我得到一个16个元素的数组，图表不起作用

据我所知，一切看起来都应该如此，如果我检查控制台内的2D数组，数据看起来是正确的，但我无法理解为什么我会得到一个额外的元素，以及图表不起作用的原因。我试过拼接阵列，但是没有用。

这三个实现之间有什么根本的不同（两个有效，一个没有？）我想我可以在给定一个固定数字的情况下做一个for循环（j = 5; j <20; j ++），但这并不能很好地扩展，并且比让$ .each工作更麻烦。

提前致谢！

编辑：完整的bar.js文件：

$(function () {
    var data = new Array ();
    var ds = new Array();
    var namespacedata = [];

    $.getJSON("resources/get_namespace_usage.php", function(result) {
        $.each(result, function(i, item) {
            namespacedata.push([Number(item.NAMESPACE),Number(item.used)]);
        });
        data.push(namespacedata);
        console.log(data);
    });

    for (var i=0, j=data.length; i<j; i++) {

        ds.push({
            data:data[i],
            grid:{
                hoverable:false
            },
            bars: {
                show: true,
                barWidth: 0.8,
                order: 1,
                align: "center",
                lineWidth: 0.5,
                fillColor: { colors: [ { opacity: 0.75 }, { opacity: 1 } ] }
            }
        });
    }

    var somePlot = $.plot($("#bar-chart"), ds, {
        colors: ["#F90"],
        yaxis: {
            min: 0,
            max: 100,
        },
        xaxis: {
            ticks: [[5,"NS5"],[6,"NS6"],[7,"NS7"],[8,"NS8"],[9,"NS9"],[10,"NS10"],[11,"NS11"],[12,"NS12"],[13,"NS13"],[14,"NS14"],[15,"NS15"],[16,"NS16"],[17,"NS17"],[18,"NS18"],[19,"D2C"],[20,"BPN"]]
        }
    });

    var ctx = somePlot.getCanvas().getContext("2d"); // get the context
    var data = somePlot.getData()[0].data;  // get your series data
    var xaxis = somePlot.getXAxes()[0]; // xAxis
    var yaxis = somePlot.getYAxes()[0]; // yAxis
    var offset = somePlot.getPlotOffset(); // plots offset
    ctx.font = "14px 'Segoe UI'"; // set a pretty label font
    ctx.fillStyle = "black";
    for (var i = 0; i < data.length; i++){
        var text = data[i][1] + '';
        var metrics = ctx.measureText(text);
        var xPos = (xaxis.p2c(data[i][0])+offset.left) - metrics.width/2; // place  it in the middle of the bar
        var yPos = yaxis.p2c(data[i][1]) + offset.top + 13; // place at top of bar, slightly up
        ctx.fillText(text, xPos, yPos);
    }
});

Answer 1

$.each不是问题。检查来自PHP的响应。

在console.log(result)行之前添加$.each。

另外，请注意Array#push将其参数添加到数组中。因此，行data.push(namespacedata);会将一个项目添加到包含16个元素的data。如果您想将16个项目追加到data，那么您应该查看Array#concat

$ .each还有一个项目而不是for循环

1 个答案: