Highcharts无法显示数据

时间:2015-05-29 17:32:02

标签: php html ajax json highcharts

我正在尝试创建一个简单的程序,从我设置的数据库中获取天气数据,并将其显示在网页上。我现在设置的方式是你必须在文本框中输入一个值才能获取数据。

我的HTML代码:

    <!DOCTYPE html>
    <html>
        <head>
            <title>Database</title>
        </head>
        <body>
            Name: <input type="text" id="name">
            <input type="submit" id="name-submit" value="Grab">
            <div id="name-data"></div>
            <div id="container" style="min-width: 310px; height: 400px; 
             margin: 0 auto"></div>
            <script src="http://code.jquery.com/jquery-1.8.0.min.js">
            </script>
            <script src="js/global.js"></script>
            <script src="http://code.highcharts.com/highcharts.js"></script>
            <script src="http://code.highcharts.com/modules/exporting.js">                </script>
        </body>
    </html>

我的PHP代码:

<?php
if(isset($_POST['name']) === true && empty($_POST['name']) === false) {
     mysql_connect("localhost", "root", "Logilube163");
     mysql_select_db("Weather_Test_Simple_Schema__Rev1");
     $query = mysql_query("SELECT * FROM Location");
         while($row = mysql_fetch_array($query)){
             $time = strtotime($row['time']) * 1000;
             $tempF = $row['temp_f'];   
             ![enter image description here][1]$data []= [(int)$time, (int)$tempF];
         }
     echo json_encode($data);
  }
?>

代码能够查询我的数据库,并将数据放入数据数组$ data。

然后使用json_encode()对数据数组进行编码;函数并被转移到javascript文件,在那里它被成功读出并放在html页面上。

我的JS代码:

$('input#name-submit').on('click', function(){
var name = $('input#name').val();
   if($.trim(name)!=''){
       $.post('/ajaxdb/ajax/name.php',{name: name}, function(data){
           $('div#name-data').text(data); // Outputs the data before the graph

           $('#container').highcharts({
           chart: {
                zoomType: 'x'
           },

           xAxis: {
           type: 'datetime',
           minRange:   24 * 3600000 
       },

           title : {
               text : 'Weather Data'
           },

           series : [{
               data: data // <-- This data is not being read in by the graph
               //[[1432813308000,78],[1432813904000,77],[1432813968000,77],[1432814016000,77],[1432815600000,78],[1432832464000,66],[1432843057000,65],[1432843731000,65]]
               //The above data is read in by the graph and plots just fine.
          }]
      });
    });
  }
});

我的输出结果如下所示: enter image description here

问题是这个在javascript中读出的数据相同,并且无法放在highcharts图中。相反,图表是使用正确的轴创建的,但没有任何数据点。但是,当我输入由标签创建的数据点时,数据绘制得很好。

1 个答案:

答案 0 :(得分:0)

为了回答我自己的问题,我发现我需要代码:

header("Content-type: text/json");

在我的.php文件的顶部。