我在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“}”}
感谢您提供任何帮助......
答案 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序列化,然后返回了该对象。希望这会对其他人有所帮助。