douxuqiao6394
douxuqiao6394
2015-05-29 17:32

Highcharts无法显示数据

已采纳

I am trying to create a simple program that takes weather data from my database that I have setup, and display it on a webpage. The way I have it setup right now is that you have to enter a value in the text box in order to get the data to pull.

My HTML Code:

    <!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>

My PHP Code:

<?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);
  }
?>

The code is able to query my database, and put the data into the data array $data.

The array of data is then encoded using the json_encode(); function and is transferred to the javascript file where it is successfully being read out and placed in a on the html page.

My JS code:

$('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.
          }]
      });
    });
  }
});

My output result looks like this: enter image description here

The problem is that this same data that is read out in the javascript, and is not being able to be placed in the highcharts graph. Instead, the chart gets created with the correct axis but without any data points. However, when I enter the data points being created by the tag, the data gets plotted just fine.

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • dongti8535 dongti8535 6年前

    To answer my own question, I found that I needed the code:

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

    At the top of my .php file.

    点赞 评论 复制链接分享

为你推荐