Проблема с использованием данных JSON с Framework7 и PhoneGap
Я новичок в разработке мобильных приложений, поэтому я использую учебные пособия из framework7 и тестирую приложение на телефоне с PhoneGap, но столкнулся с проблемой, которую просто не могу понять, что происходит.
О приложении: я использую Flot для отображения гистограммы. (У меня уже есть функциональная диаграмма, поэтому я снова использую этот код), но проблема в том, что я хочу использовать строку JSON для передачи ее во Flot.
Чтобы прояснить ситуацию, вот код.
Ajax-вызов для получения строки JSON
$$.ajax({
url: "php/grafica2.php?id=14&tipo=watts&fecha=2016-05-03",
dataType: "json",
success: function(data) {
onDataReceived(data); //this is a function that contains the flot code
}
});
PHP json string я получаю через ajax (данные)
[{"label":"kWh","color":"#9EC485","data":[[1462147200000,19.31675],[1462233600000,15.083416666667],[1462320000000,17.978833333333],[1462406400000,20.4195],[1462492800000,8.2081083333333],[1462579200000,22.394],[1462665600000,23.445666666667],[1462752000000,13.1724],[1462838400000,16.047933333333],[1462924800000,17.391666666667],[1463011200000,6.2165166666667],[1463097600000,1.7152833333333],[1463184000000,22.048083333333],[1463270400000,15.552825],[1463356800000,0.50152083333333],[1463443200000,2.5424583333333],[1463529600000,9.0519],[1463616000000,5.3256333333333],[1463702400000,10.64955],[1463788800000,10.9358],[1463875200000,19.499916666667],[1463961600000,9.2917083333333],[1464048000000,8.8524],[1464134400000,11.613316666667],[1464220800000,14.547891666667],[1464307200000,0],[1464393600000,8.1566916666667],[1464480000000,8.998325],[1464566400000,11.784241666667],[1464652800000,8.0039666666667],[0,7.423675]]}]
Вызов функции Flot (переданные "данные" - это код json выше)
$.plot("#graficaEnergia", data, {
grid: {
hoverable: true,
borderColor: "#f3f3f3",
borderWidth: 1,
tickColor: "#f3f3f3"
},
series: {
bars: {
show: true,
align: 'center',
barWidth: 31600000,
lineWidth: 0,
fillColor: {
colors: [{
opacity: 0.7
}, {
opacity: 0.7
}]
}
}
},
lines: {
fill: true, //Converts the line chart to area chart
color: "#235601"
},
yaxis: {
min: 0,
show: true,
labelWidth: 30
},
xaxis: {
mode: "time",
tickFormatter: function (val, axis) {
//return dayOfWeek[new Date(val).getDay()];
dia = monthSpanish[new Date(val).getMonth()]
dia2 = new Date(val).getDate();
return dia+" "+dia2;
},
tickSize: [1, "day"],
min: (new Date(2016, 4, 0)).getTime(),
max: (new Date(2016, 5, 0)).getTime(),
labelHeight: 30
},
legend: {
show: true
}
});
Сейчас. Я попробовал несколько вещей, и вот как я знаю, что есть проблема с JSON в целом, который я не уверен, является ли это ошибкой Framework7 или PhoneGap.
Я удалил строку "dataType: "json"" из вызова ajax, и когда я тестировал ее на phonegap, он фактически показал мне шаблон с плавающей запятой, но без каких-либо данных.
Итак, поскольку теперь я не получаю объект json из вызова ajax, я попытался проанализировать полученную строку с помощью либо $.parseJSON(data); и JSON.parse(data); Но всякий раз, когда я использую эти функции, график снова ломается, и он просто не показывает его вообще.
Наконец, просто чтобы убедиться, что мой код верен и проблема заключается в объекте json, я пошел и поместил свою строку json непосредственно в вызов flot следующим образом:
$.plot("#graficaEnergia", [{"label":"kWh","color":"#9EC485","data":[[1462147200000,19.31675],[1462233600000,15.083416666667],[1462320000000,17.978833333333],[1462406400000,20.4195],[1462492800000,8.2081083333333],[1462579200000,22.394],[1462665600000,23.445666666667],[1462752000000,13.1724],[1462838400000,16.047933333333],[1462924800000,17.391666666667],[1463011200000,6.2165166666667],[1463097600000,1.7152833333333],[1463184000000,22.048083333333],[1463270400000,15.552825],[1463356800000,0.50152083333333],[1463443200000,2.5424583333333],[1463529600000,9.0519],[1463616000000,5.3256333333333],[1463702400000,10.64955],[1463788800000,10.9358],[1463875200000,19.499916666667],[1463961600000,9.2917083333333],[1464048000000,8.8524],[1464134400000,11.613316666667],[1464220800000,14.547891666667],[1464307200000,0],[1464393600000,8.1566916666667],[1464480000000,8.998325],[1464566400000,11.784241666667],[1464652800000,8.0039666666667],[0,7.423675]]}], {
grid: {
hoverable: true,
borderColor: "#f3f3f3",
borderWidth: 1,
tickColor: "#f3f3f3"
},
series: {
bars: {
show: true,
align: 'center',
barWidth: 31600000,
lineWidth: 0,
fillColor: {
colors: [{
opacity: 0.7
}, {
opacity: 0.7
}]
}
}
},
lines: {
fill: true, //Converts the line chart to area chart
color: "#235601"
},
yaxis: {
min: 0,
show: true,
labelWidth: 30
},
xaxis: {
mode: "time",
tickFormatter: function (val, axis) {
//return dayOfWeek[new Date(val).getDay()];
dia = monthSpanish[new Date(val).getMonth()]
dia2 = new Date(val).getDate();
return dia+" "+dia2;
},
tickSize: [1, "day"],
min: (new Date(2016, 4, 0)).getTime(),
max: (new Date(2016, 5, 0)).getTime(),
labelHeight: 30
},
legend: {
show: true
}
});
И это действительно сработало, когда я проверил его на своем телефоне, там была диаграмма со всеми данными и полосами, которые выглядели довольно красиво.
Итак, я совершенно заблудился, как это исправить, так как я не могу получить данные в виде json при вызове ajax и не могу проанализировать строку перед отправкой данных во Flot.
Любые мысли или идеи, которые помогут мне исправить это, будут по-настоящему оценены. Спасибо за чтение до этого момента!
1 ответ
Неважно, ребята, я узнал, что на самом деле происходит. (Как я уже сказал, я новичок в разработке мобильных телефонов)
Оказывается, я тестировал приложение на своем локальном сервере, поэтому мой PHP вообще не обрабатывался, когда я тестировал его на PhoneGap. Итак, я загрузил свой php-скрипт на удаленный сервер и изменил URL-адрес ajax, чтобы он указывал на него.
Следующей проблемой была ошибка при попытке подключиться к удаленному файлу, поэтому я добавил эту строку в свой php-скрипт.
<?php header('Access-Control-Allow-Origin: *'); ?>
И это все. Диаграмма работает сейчас, когда я проверяю это.