空白页面高清使用jquery来调用json arrary

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

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

array.php页面

 $c,"data2"=>[$h,$t]); } echo json_encode($ar1); ?> 

jquery页面的代码是

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

但代码并不完整。 但直到错误得到解决，我才能继续前进。 如果我运行html代码，则通过循环并警告array.php中的每个数据，alert函数可以正常工作。 但如果我取消注释

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

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

 $(document).ready(function() { 

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

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

Answer 1

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

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

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

Answer 2

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

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

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

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