下面是我用来调用Ajax请求来绑定jqchart插件的代码。
这里的问题是在Ajax调用响应之前调用了jqchart。
我需要帮助:
$(document).ready(function () {
var ajaxDataRenderer =
function (url, plot, options) {
var ret = null;
$.ajax({
type: "POST",
async: false,
url: url,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
ret = msg.d;
},
error: AjaxFailed
});
return ret;
};
$('#jqChart').jqChart({
series: [
{
type: 'line',
title: 'Series 1',
data: ajaxDataRenderer('TestService.asmx/getTotal')
}
]
});
function AjaxFailed(result) {
alert(result.status + ' ' + result.statusText);
}
});
我已经改变了我的代码，但仍然不能工作:
<script lang="javascript" type="text/javascript">
$(document).ready(function () {
$.ajax({
type: "POST",
async: false,
url: "TestService.asmx/getTotal",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
alert(msg.d);
$('#jqChart').jqChart({
series: [
{
type: 'line',
title: 'Series 1',
data: msg.d
}
]
});
},
error: AjaxFailed
});
function AjaxFailed(result) {
alert(result.status + ' ' + result.statusText);
}
});
</script>
这是我从Ajax响应返回的数据:
[['Jan',0],['Feb',0],['Mar',21],['Apr',0],['May',0],['Jun',0],['Jul',5],['Aug',0],['Sep',0],['Oct',0],['Nov',0],['Dec',0]]
//////////////////最后//////////////////////////////谢谢你的帮助，我发现从我的webmethod返回的数据不是正确的格式，即它是([['jan'， 62]， ['feb'， 60]， ['mar'， 68]， ['apr'， 58]， ['may'，52]，['jun'， 60]， ['jul'， 48]，['aug'， 62]， ['sep'， 60]， ['oct'， 68]， ['nov'， 58]， ['dec'，100])，
现在我已经改变了webmethod只返回数据点数组[i]。62年e[0] =[1] = 60…我将月份设置为默认的x轴值，我的代码如下:
<script lang="javascript" type="text/javascript">
$(document).ready(function () {
$.ajax({
type: "POST",
async: false,
url: "TestService.asmx/getTotal",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
var c = [];
var myarr = new Array();
var j=0;
for (var i = 0; i <= 11; ++i) {
c.push(msg.d[j + 1]);
j+=2;
}
$('#jqChart').jqChart({
axes: [
{
type: 'category',
location: 'bottom',
categories: ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul','aug','sep','oct','nov','dec']
}
],
series: [
{
type: 'line',
title: 'Series 1',
data: c
}
]
});
},
error: AjaxFailed
});
function AjaxFailed(result) {
alert(result.status + ' ' + result.statusText);
}
});
</script>
///////////////////////////////////////////////////////////////////////////////////////////
嗨，dragan，谢谢你提供的这些文件很有帮助，我看到了下面的代码片段，如果我想通过，你能告诉我吗[[‘简’,20],[2月,10],[3月,25],[‘君’,26],[7月,15]]作为数据返回从我的ajax响应到下面代码片段中的数据部分。
$('#jqChart').jqChart({
title: { text: 'Linear Axis' },
axes: [
{
type: 'linear',
location: 'left',
minimum: 10,
maximum: 100,
interval: 10
}
],
series: [{
type: 'column',
data: [['a', 70], ['b', 40], ['c', 85],
['d', 50], ['e', 25], ['f', 40]]
}]
});
//////////////////////////////////////////////////////////////////////////////////////////
I have tried using as below,
the msg is the array of length 24
where msg.d[0] = 'jan'
msg.d[1] = 10
msg.d[2] = 'feb'
msg.d[3] = 20
'
'
'
msg.d[22] = 'dec'
msg.d[23] = 50
//script is as below
var data = [];
success:function(msg){
var j=0;
for (var i = 0; i <= 11; ++i) {
data.push(msg.d[j],msg.d[j + 1]);
j+=2;
}
$('#jqChart').jqChart({
series: [
{
type: 'line',
title: 'Series 1',
data: data
}
]
});
}
The output i get is
in y axis i get numbers from 1 to 100
& in x axis i get jan,feb,mar
the problem is there is no line graph only axis are displayed.
将jqChart移动到ajax的成功回调中
$(document).ready(function () {
$.ajax({
type: "POST",
async: false,
url: url,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
$('#jqChart').jqChart({
series: [
{
type: 'line',
title: 'Series 1',
data: msg.d
}
]
});
},
error: AjaxFailed
});
return ret;
};
function AjaxFailed(result) {
alert(result.status + ' ' + result.statusText);
}
});
将jqChart移动到成功回调中是正确的方法。我只是在尝试这种方法，它很有效。
也许如果你给我(dragan.matek@jqchart.com)一个样本项目，我们可以更好地看它。
试试下面的代码片段:
var data = msg.d;
var chartData = [];
for (var i = 0; i < data.length; i += 2) {
var item = [data[i], data[i + 1]];
chartData.push(item);
}
$('#jqChart').jqChart({
series: [
{
type: 'line',
title: 'Series 1',
data: chartData
}
]
});