我正在潜入整个移动应用程序开发领域,因此我一直在使用Framework7的教程并使用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字符串我通过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]]}]
海军报函数调用( “数据”,通过以上的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上测试它时,它实际上向我显示了flot图表模板,但没有任何数据。因为现在我没有从ajax调用中获取json对象,所以我尝试了解我用$ .parseJSON(data)得到的字符串。和JSON.parse(data);但是,只要我使用这些函数,图表就会再次打破,它根本不显示它。
最后,只是为了确保我的代码是正确的,问题是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
}
});
而且它实际上当我在我的手机上测试它时,工作了,图表在那里所有的数据和酒吧看起来很漂亮。
所以,我完全失去了如何解决这个问题,因为我不能在ajax调用上接收数据作为json,也不能在将数据发送到Flot之前解析字符串。
任何想法或想法,以帮助我解决这个问题将真正赞赏。感谢您阅读这一点!