Highcharts预处理实时数据示例不起作用

时间:2014-05-29 14:57:51

标签: php json highcharts

我正在尝试使用Highcharts的示例,您可以在其中实时查看数据。但是当我运行网站时,它立即想下载网站页面(charts2.php)。当我删除PHP代码中的JSON标题时,它不想下载任何内容,但高清图不会再返回任何内容。请有人帮帮我。虽然还是新手......

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Login Form</title>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
      <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type="text/css" href="style2.css">

  <script>
    var chart; // global

    /**
     * Request data from the server, add it to the graph and set a timeout to request again
     */
    function requestData() {
      $.ajax({
        url: 'live-server-data.php', 
        success: function(point) {
          var series = chart.series[0],
            shift = series.data.length > 20; // shift if the series is longer than 20

          // add the point
          chart.series[0].addPoint(eval(point), true, shift);

          // call it again after one second
          setTimeout(requestData, 1000);  
        },
        cache: false
      });
    }

    $(document).ready(function() {
      chart = new Highcharts.Chart({
        chart: {
          renderTo: 'container',
          defaultSeriesType: 'spline',
          events: {
            load: requestData
          }
        },
        title: {
          text: 'Live random data'
        },
        xAxis: {
          type: 'datetime',
          tickPixelInterval: 150,
          maxZoom: 20 * 1000
        },
        yAxis: {
          minPadding: 0.2,
          maxPadding: 0.2,
          title: {
            text: 'Value',
            margin: 80
          }
        },
        series: [{
          name: 'Random data',
          data: []
        }]
      });   
    });
    </script>
</head>
<body>

<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>

      <?php

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

// The x value is the current JavaScript time, which is the Unix time multiplied 
// by 1000.
$x = time() * 1000;
// The y value is a random number
$y = rand(0, 100);

// Create a PHP array and echo it as JSON
$ret = array($x, $y);
echo json_encode($ret);

?>
</body>
</html>

0 个答案:

没有答案