프레임 워크 7의 자습서를 사용하고 PhoneGap을 사용하여 휴대 전화에서 응용 프로그램을 테스트 했으므로 새로운 모바일 앱 개발이 시작되었습니다. 단순히 무슨 일이 일어나고 있는지 이해할 수는 없습니다.Framework7 및 PhoneGap에서 JSON 데이터 사용 문제
앱 정보 : 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 문자열 (데이터)
[{"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 오류인지 확실하지 않습니다.
ajax 호출에서 'dataType : "json"'행을 삭제했으며 phonegap에서이를 테스트했을 때 실제로 플롯 차트 템플릿을 보여 주었지만 데이터는 표시하지 않았습니다.
아약스 호출에서 json 객체를 얻지 못해서 얻은 문자열을 구문 분석하려고 시도했습니다. $ .parseJSON (data); 및 JSON.parse (data);하지만이 함수를 사용할 때마다 차트가 다시 깨져서 전혀 표시되지 않습니다.
마지막으로, 내 코드를 잘 있는지 확인하고 문제는 JSON 개체입니다, 내가 가서 지금처럼 FLOT 호출에 직접을 내 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으로 데이터를받을 수 없으며 Flot에 데이터를 보내기 전에 문자열을 구문 분석 할 수 없기 때문에이 문제를 해결하는 방법이 완전히 분실되었습니다.
이 문제를 해결할 수있는 생각이나 아이디어는 정말 감사하겠습니다. 지금까지 읽어 주셔서 감사합니다!