空白页highchart使用jQuery调用JSON arrary(blank page highc

我有一个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代码，报警功能通过循环和从array.php提醒每个数据的效果很好。但是，如果我取消

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

然后报警功能不起作用了。我有不承认的变量（图）的感觉。之前，我已经声明它

$(document).ready(function() {

因此，这将是一个全局变量，但它似乎并不如此。

拜托，我真的需要帮助。我是现在，但没有成功，这方面的工作了好几天。我会深深体会到它。在此先感谢 - 艾玛

Answer 1:

你真的需要做一个Ajax调用？你能不能在PHP页面处理过程中推数据？我不知道你在做任何环路或实时更新图表，你只是想在负荷加载数据，而不是阿贾克斯，我会建议直接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
});
  }

}