Question

使用Flot作为图表时遇到以下问题。图表的输入是JSON，从服务器检索。

获取数据的ajax调用是：

$.ajax({
    url: 'graphdata.do',
    dataType: 'json',
    success: function (retData) {
        renderGraph(retData);
    }
});

renderGraph函数：

function renderGraph(datasets)
{
    var data = [];
    console.log(datasets);
    $('.cbScenarioSelected').each(function(index) {
        if($(this).is(':checked')){
            var id = $(this).prop("id"); //this works, right id is returned
            data.push(datasets[id]);
        }
    });

    $.plot($("#graph1"), data, {
        yaxis: { min: 0 },
        xaxis: { tickDecimals: 0 }
    });
}

从服务器返回的数据：

{
    "1": {
        "label": "Name1",
        "data": "[[133,64.8000030517578],[134,64.8099975585938],[135,65.0999984741211],[136,66.0699996948242],[137,66.129997253418],[138,66.2600021362305],[139,66.6699981689453],[140,66.9400024414063],[141,67.4100036621094],[142,68.0599975585938],    [143,68.0800018310547],[144,68.3600006103516],[145,68.8699951171875],    [146,69.4899978637695],[147,69.6500015258789],[148,70.0999984741211],    [149,70.7400054931641],[150,70.9199981689453],[151,71.1500015258789],    [152,71.7000045776367],[153,72.0899963378906],[154,72.4799957275391],    [155,73.2700042724609],[156,73.3000030517578],[157,73.4599990844727],    [158,73.5100021362305],[159,74.6799926757813],[160,77.5200042724609],    [161,77.8399963378906],[162,78.8300018310547]]"
    },
    "2": {
        "label": "Name2",
        "data": "[]"
    },
    "3": {
        "label": "Name3",
        "data": "[]"
    }
}

显示图表容器，标签也是如此。图中的线未显示。有人有想法吗？我认为它与返回数据中“data”标签周围的引号有关，但我不知道如何修复它。

Answer 1

在您的JSON中，数据部分是字符串，因为它们用引号封装。

实际上，json应该看起来像（没有引号）

    {
    "1": {
        "label": "Name1",
        "data": [
            [
                133,
                64.8000030517578
            ],
            [
                134,
                64.8099975585938
            ],
            [
                135,
                65.0999984741211
            ],
            [
                136,
                66.0699996948242
            ],
            [
                137,
                66.129997253418
            ],
            ...
        ]
    },
    "2": {
        "label": "Name2",
        "data": []
    },
    "3": {
        "label": "Name3",
        "data": []
    }
}

jQuery Flot图表未加载（JSON数据）

1 个答案: