使用jquery调用json数组的空白页highchart答案

【问题标题】：blank page highchart in using jquery to call json arrary使用jquery调用json数组的空白页highchart
【发布时间】：2012-08-07 17:31:54
【问题描述】：

我有一个 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() {

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

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

【问题讨论】：

标签： jquery highcharts json

【解决方案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
});
  }

}

【讨论】：

感谢 Jugal Thakkar 和 wergeld。我已经使用了您的第二个代码并将 int 解析为我的数据库数据，然后再将其传递给 json_encode。我现在想看看如何添加类别。我不知道该如何感谢你。我只能说：给你的肘部更多的油脂。
嗯，最简单的感谢方式是支持我们的答案并将其中一个标记为正确。很高兴我们能提供帮助

【解决方案2】：

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

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

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

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

【讨论】：

感谢您的建议，但我认为 chart = new Highcharts.Chart({
非常感谢您的建议@wergeld，但我认为 chart = new Highcharts.Chart({ 在 $(document).ready(function() { 内。所以，我想知道我怎么能去吧。如果你不介意，你可以编辑我的代码。提前谢谢
将您的图表声明和您的 ajax 调用放入文档就绪函数中。
为了确保您在 ajax 调用中获得整数而不是字符串，我从 [link] $ar1[] = array("name" =>$ 更改了 array.php 代码中的一行c,"data2"=>[$h,$t]); to $ar1[] = array("name" =>$c,"data2"=>[(int)$h,(int)$t]);我希望这对某人非常有用，因为 HIGHCHARTS 在他们的文档中没有提供这样一个完整的 php/jquery 示例，比如这个。两位贡献者的所有学分。这是完美的！再次感谢