0

我有一个 php 页面（array.php）。在浏览器上，array.php 产生 ff 结果

[{"name":"London","data2":["70","19"]},{"name":"Tokyo","data2":["60","18"]}]

array.php 页面

<?php
//header("Content-type: text/json");
header("Content-type: application/json");


$db = mysql_connect("localhost", "username", "userpasswd"); 
mysql_select_db("weather",$db);
$query = "SELECT * FROM measures";

$result = mysql_query($query,$db);

while($row = mysql_fetch_array($result))
{
$h = $row["humidity"];
$w = $row["windspeed"];
$t = $row["temperature"];
$c = $row["city"];
$ar1[] = array("name" =>$c,"data2"=>[$h,$t]);
}
echo json_encode($ar1);

?>

jquery页面的代码是

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="./js/highcharts.js"></script>

<script type="text/javascript">

var chart = null;      // global
$(document).ready(function() {
chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'column',
        events: {
            load: requestData
        }
    },
    title: {
        text: 'Real time data from database'
    },
    xAxis: {
            categories: []
        },
    yAxis: {
        minPadding: 0.2,
        maxPadding: 0.2,
        title: {
            text: 'Value',
            margin: 80
        }
    },
    series: []
});        
});

/**
 * Request data from the server
 */
function requestData() {

$.ajax({
    url: 'array.php',
    success: function(point) {

    $.each(point, function(i,item){
        var series_name = item.name;
        var series_data = item.data2;

        var series = {data: []};

        chart.xAxis.categories.push(series_name);
        //chart.series.data.push(item.data2);

        $('body').append( "Name: " + series_name);
        alert(series_data);

    });


    },
    cache: false
});
}

</script>

</head>

<body>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>

虽然代码不完整。但在错误修复之前，我无法继续前进。如果我运行 html 代码，alert 函数通过循环并警告来自 array.php 的每个数据来很好地工作。但是如果我取消注释

//chart.xAxis.categories.push(series_name); or //chart.series.data.push(item.data2);

然后警报功能不再起作用。我有一种感觉，它无法识别变量（图表）。我之前已经声明过

$(document).ready(function() {

所以它将是一个全局变量，但似乎并非如此。

拜托，我真的需要帮助。我已经为此工作了几天，但没有成功。我将深深感激。提前致谢 - 艾玛

4

2 回答 2

1

您真的需要进行 Ajax 调用吗？php页面处理过程中不能推送数据吗？我没有看到您对图表进行任何循环或实时更新，您只是想在加载时加载数据，而不是 Ajax，我建议直接使用 php。

就您的问题而言，是的图表在您尝试访问它时没有实例化。我试图重现您的问题@ http://jsfiddle.net/jugal/Zjket/以下是我的发现

在此处输入图像描述

requestData在调用 Highchart 的构造函数期间调用该方法。所以？这意味着构造函数调用尚未完成，因此对象 ( chart) 尚未实例化。Highchart 还支持将回调方法作为其构造函数的第二个参数，它在构造后调用它（但仍然来自构造函数，只是你的图表现在在内部准备好了，但构造函数调用尚未返回给它的调用者）作为chart = new Highcharts.Chart({...},requestData)但同样的问题仍然存在。奇怪的？并非如此，requestData 方法是使用图表对象作为其上下文来调用的，这意味着虽然您不能使用该chart变量引用“图表”，但您可以访问它，this因为它chart是 requestData 的调用者。

不幸的是，您的问题现在刚刚达到下一个级别，但图表仍然不会显示数据，因为现在新的错误是，您的 json 格式不正确[{"name":"London","data2":["70","19"]},{"name":"Tokyo","data2":["60","18"]}]，数字不应该在引号内，而应该是[{"name":"London","data2":[70,19]},{"name":"Tokyo","data2":[60,18]}]您需要转换在将它们传递给 json_encode 之前将值转换为数字。修复此问题后，又遇到了一些错误。此外，您实际上不应该将系列推送到chart.series对象，而是使用chart.addSeries(...)@ http://www.highcharts.com/stock/ref/#series

更多的摆弄和调试让我找到了这个解决方案 http://jsfiddle.net/jugal/JfgxX/

 function requestData() {
 chart=this;
 $.ajax({
url: 'array.php',
success: function(point) {
    $.each(point, function(i,item){
    var series_name = item.name;
    var series_data = item.data2;
    var series = {data: item.data2,name:series_name};
    chart.addSeries(series);
});


},
cache: false
});
  }

编辑 您的方法的另一种替代方法可以像@wergeld 提到的那样，首先进行 Ajax 调用，然后在该调用成功时创建图表，如下所示。小提琴@http ://jsfiddle.net/jugal/j4ZYB/

 var chart=null;
$(function() {
   requestData();
});

function requestData() {
     $.ajax({
    url: 'array.php',
     success: function(point) {
      var chartSeriesData=[];
         $.each(point, function(i,item){
         var series_name = item.name;
         var series_data = item.data2;     
         var series = {data: item.data2,name:series_name};
        chartSeriesData.push(series);
        });
     chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'column'      ,      

    },
    title: {
        text: 'Real time data from database'
    },
    xAxis: {
            categories: []
        },
    yAxis: {
        minPadding: 0.2,
        maxPadding: 0.2,
        title: {
            text: 'Value',
            margin: 80
        }
    },
    series: chartSeriesData
});         
},
cache: false
});
  }

}
于 2012-08-07T19:37:43.903 回答
0

看起来您正试图在创建图表之前将数据推送到图表。您将图表声明为 NULL，是的，但是当图表 var 不知道它是什么时，它如何知道它应该将数据推送给它？似乎您的页面执行顺序是：

  1. 声明图表
  2. 通过ajax获取数据
  3. 将数据推送到图表
  4. 将图表声明为 Highcharts.Chart

为什么不从 ajax 调用中获取数据，然后在$(document).ready(function() {调用中推送到数据图表。这样您的操作顺序将是：

  1. 通过ajax获取数据
  2. 将图表声明为 Highcharts.Chart
  3. 将数据推送到图表
于 2012-08-07T17:41:30.780 回答