以下は、jqchart プラグインをバインドするための Ajax リクエストを呼び出すために使用するコードです。
ここでの問題は、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]]
//////////////////最後に////////////////////////////ありがとう皆様のご協力により、Web メソッドから返されたデータが正しい形式ではないことがわかりました。つまり、([['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を変更しました[つまり、a [0] = 62、a [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、あなたが提供したこれらの文書は非常に役に立ちました。私は以下のスニペットを見ました。 25],['jun',26],['jul',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.