Question

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

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

array.php page

<?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的每个数据，alert函数可以正常工作。但如果我取消注释

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

然后警报功能不再起作用。我感觉它不能识别变量（图表）。我之前已经宣布了

$(document).ready(function() {

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

拜托，我真的需要帮助。我现在正在研究这几天但没有成功。我将深深体会到这一点。在此先感谢 - 艾玛

Answer 1

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

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

enter image description here

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

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

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

chart.addSeries(...)

修改如@wergeld所述，您的方法的另一种替代方法是首先进行Ajax调用，然后在该调用成功时创建图表，如下所示。小提琴@ http://jsfiddle.net/jugal/j4ZYB/

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

Answer 2

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

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

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

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

使用jquery调用json数组的空白页面高图

2 个答案: