#jquery #ajax #jqchart
#jquery #ajax #jqchart
Вопрос:
Ниже приведен код, который я использую для вызова Ajax-запроса для привязки плагина jqchart.
здесь проблема в том, что jqchart вызывается до того, как будет получен ответ от вызова Ajax.
Пожалуйста, мне нужна помощь здесь:
$(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]]
//////////////////Наконец//////////////////////////////
Спасибо за всю вашу помощь, я обнаружил, что данные, возвращенные из моего веб-метода, были не в правильном формате, т.е. это было ([[‘jan’, 62], [‘feb’, 60], [‘mar’, 68], [‘apr’, 58], [‘may’,52],[‘jun’, 60], [‘jul’, 48], [‘aug’, 62], [‘sep’, 60], [‘oct’ , 68], [‘ноябрь’, 58], [‘декабрь’,100]]),
Теперь я изменил веб-метод, чтобы возвращать точки данных только в виде массива [т.е. a [0] = 62,a[1] =60….so включено] и нет месяцев, и я устанавливаю месяцы в качестве значений оси 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>
///////////////////////////////////////////////////////////////////////////////////////////
привет, драган, спасибо, что предоставленные вами документы были очень полезны, я видел этот фрагмент ниже, можете ли вы дать мне знать, предположим, я хочу передать — [[‘jan’, 20], [‘feb’, 10], [‘mar’, 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
amp; in x axis i get jan,feb,mar
the problem is there is no line graph only axis are displayed.
Ответ №1:
переместите 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);
}
});
Комментарии:
1. что не работает? получаете ли вы какие-либо ошибки в firebug?
Ответ №2:
Перемещение jqChart внутри успешного обратного вызова является правильным способом. Я просто пробую этот подход, и он работает.
Возможно, если вы отправите мне (dragan.matek@jqchart.com ) пример проекта, мы можем рассмотреть его получше.
Комментарии:
1. привет, Драган Матек, не могли бы вы рассказать мне, как установить по умолчанию, чтобы ось по умолчанию указывала на 0, в моем случае, когда все значения равны нулю, ось показывает отрицательные значения и как изменить цвет линейной диаграммы с синего на любой другой цвет, я даже сталкиваюсь с проблемой, используя более одной диаграммы в IE (т. Е. отображается только 1, другие не видны), это не тот случай в mozilla
2. Вы можете установить для оси точек значение 0, установив минимальное значение оси равным 0. Смотрите нашу справку: jqchart.com/documentation/userguide/… В последнем примере на этой странице показано, как изменить внешний вид строки jqchart.com/documentation/userguide/… Странно, что отображается только одна диаграмма. Имеют ли ваши диаграммы уникальные идентификаторы (jqChart1, jqChart2)?
3. привет, Драган, спасибо, что предоставленные вами документы были очень полезными, можете ли вы проверить мой последний пост……
Ответ №3:
Попробуйте этот фрагмент кода:
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
}
]
});