2016-08-12 26 views
0

我正在潜入整个移动应用程序开发领域,因此我一直在使用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之前解析字符串。

任何想法或想法,以帮助我解决这个问题将真正赞赏。感谢您阅读这一点!

回答

0

没关系,我发现了真正发生的事情。 (就像我说我是新兴的手机大声笑)

原来我在我的本地服务器上测试应用程序,所以一旦我在PhoneGap上测试了它,我的PHP就没有得到处理。所以,我将我的php脚本上传到远程服务器,并将ajax URL更改为指向那里。

下一个问题是当尝试连接到远程文件时发生错误,所以我在我的PHP脚本中添加了这一行。

<?php header('Access-Control-Allow-Origin: *'); ?> 

而就是这样。当我测试它时,Chart正在工作。