jqPlot和JSON格式的数据

时间:2013-08-20 16:48:08

标签: json jquery jqplot

我在jQuery中返回带有Ajax调用的JSON字符串,我想使用jqPlot将这些数据泵入条形图。

我从另一个Stack-Overflow帖子获得了JSON转换代码,但无法理解为什么这不起作用。我的代码:

$.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    data: JSON.stringify(DTO), //JSON.stringify(AnDParms), combined, 
    url: "GetAdmitsDischarges.asmx/GetAandD",
    dataType: "json",
    success: function (data) {
        //do chart stuff here.
        var line1 = [];
        for (var prop_name in data.d) {
            line1.push([prop_name, data[prop_name]])
        }
        var ticks = ['Admits', 'Discharges'];

        var plot1 = $.jqplot('chartdiv', [line1], {
            title: 'Admits & Discharges',
            series: [{ renderer: $.jqplot.BarRenderer}],
            axesDefaults: {
                tickRenderer: $.jqplot.CanvasAxisTickRenderer
            },
            axes: {
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer
                }
            }
        });
        //to prove the flow is working...
        //alert("Data: " + data.d);

    }, //end of success
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        alert(textStatus + ' ' + errorThrown + ' ' + XMLHttpRequest);
    } //end of error
});   //end of ajax call

在Firebug中,line1的值为(从0到32):

  

[[“0”,undefined],[“1”,undefined],... [“31”,undefined],[“32”,   未定义]

虽然数据的价值是:

  

对象{d =“{”承认“:”35“,”放电“:”36“}”}

感谢您提供任何帮助......

2 个答案:

答案 0 :(得分:1)

问题是你的JSON结构:

{
    "Admits": "35",
    "Discharges": "36"
}

您正在提供JSON对象,但jqplot需要数组:

[
  ["Admits", 35],
  ["Discharges", 36]
]

答案 1 :(得分:0)

我终于在Encosia.com的Dave Ward的帮助下弄明白了...如果你没有看过他的博客,那就直接去那里......这对你所有的.Net / jQuery需求都很好。

这是我的javascript:

    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(DTO),
        url: "GetAdmitsDischarges.asmx/GetAandD",
        dataType: "json",
        success: function (data) {
            var jqPlotData = $.map(data.d, function (value, key) {
                if (key != "__type") {
                    return [value]; //was key, value
                }
            });
            var ticks = ['Admits', 'Discharges'];
            var plot1 = $.jqplot('chartdiv', [jqPlotData], {
                title: 'Admits & Discharges',
                seriesDefaults: {
                    renderer: $.jqplot.BarRenderer,
                    rendererOptions: { varyBarColor: true },
                    pointLabels: { show: true }
                },
                axes: {
                    xaxis: {
                        renderer: $.jqplot.CategoryAxisRenderer,
                        ticks: ticks
                    }
                },
                highlighter: { show: false }

            });

此外,我从我的Web服务中删除了JSON序列化,然后返回了该对象。希望这会对其他人有所帮助。