Я новичок в разработке всего мобильного приложения, поэтому я использовал обучающие материалы из framework7 и тестировал приложение на своем телефоне с помощью PhoneGap, но я столкнулся с проблемой, что я просто не может понять, что происходит.Проблема с использованием данных JSON с 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 строку я получаю через 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, и когда я проверил ее по телефонной запинке, это фактически показало мне шаблон графической карты, но без каких-либо данных.
Итак, поскольку теперь я не получаю объект json от вызова ajax, я попытался разобрать строку, которую я получаю либо с $ .parseJSON (data); и JSON.parse (данные); Но всякий раз, когда я использую эти функции, график снова разбивается, и он просто не показывает его вообще.
Наконец, просто чтобы убедиться, что мой код является правильным, и вопрос является объектом JSON, я пошел и поставить свою JSon строку непосредственно на вызов ФЛОТ так:
$.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.
Любые мысли или идеи, которые помогут мне исправить это, будут по-настоящему оценены. Спасибо за чтение до этого момента!