在Highcharts中检索JSON数据 [英] Retrieving JSON data in highcharts
问题描述
我一直在尝试自定义一个优秀的jsfiddle，我很幸运地可以在前面的问题中找到它:
I have been trying to customize an excellent jsfiddle that I was fortunate enough to be directed to in an earlier question here: Switching between many Highcharts using buttons or link text
我对javascript编程(以及highcharts)非常陌生，并且在从数据库中检索自己的数据时遇到一些困难.目前，我已经按照以下方式设置了图表:
I am very new to javascript programming (and highcharts also) and I am having some difficulties in retrieving my own data from a database. Currently I have set up my charts like the following:
$('chart1').ready(function() {
var options = {
chart: {
renderTo: 'chart1',
type: 'column',
marginTop: 40,
marginBottom: 75
},
legend: {
enabled: false
},
title: {
text: 'Revenues',
x: 25 //center
},
xAxis: {
title: {
text: ''
},
categories: []
},
yAxis: {
showInLegend: false,
tickAmount: 11,
endOnTick: false,
startOnTick: true,
labels: {
formatter: function () {
return Highcharts.numberFormat(this.value, 0, '.', ',');
}
},
title: {
text: '<?php echo $unitCurr; ?>'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ Highcharts.numberFormat(this.y, 0,'.',',');
}
},
series: []
}
var tableName = '<?php echo $tableName; ?>'
$.getJSON("../../companies/charts/data.php", {id: escape(tableName)}, function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
chart = new Highcharts.Chart(options);
});
});
在底部，您会注意到我正在使用JSON从数据库中检索信息，并且一切正常.在我先前的问题中，我问如何使用按钮来切换图表，并被定向到以下jsfiddle: http: //jsfiddle.net/jlbriggs/7ntyzo6u/
At the bottom you will notice that I am using JSON to retrieve information from my database and everything works just fine. In my earlier question I was asking about how to switch charts using buttons instead and was directed to the following jsfiddle: http://jsfiddle.net/jlbriggs/7ntyzo6u/
此示例包含3个图表，但我一直在尝试操作第一个图表，以便确定是否可以显示自己的数据而不是显示正在生成的随机数据:
This example consists of 3 charts but I have just been trying to manipulate the first chart in order to find out if I could make my own data display instead of the random data that is being generated:
var chart,
chartOptions = {},
chartData = {};
chartData.chart1 = randomData(25);
chartData.chart2 = randomData(10, true);
chartData.chart3 = randomData(65, true, 300);
chartOptions.chart1 = {
chart: {
type: 'column'
},
title: {
text: 'Chart 1 Title'
},
yAxis: {
title: {
text: 'Chart 1<br/>Y Axis'
}
},
series: [{
name: 'Chart 1 Series',
data: chartData.chart1
}]
};
但是无论我尝试了多少，我似乎都无法更改"data:chartData.chart1"，从而无法检索从$ .getJSON函数获得的数组.谁能帮我解释为什么例如下面的代码不起作用?在这里，我尝试将ChartData.chart1数组交换为我的数据库数据.我没有足够的经验来判断代码的整个随机数生成部分是否会阻止代码正常工作，或者是我的理解严重不足. (我确保data.php中的数据确实可用，因为尝试时可以将其显示在常规数组中.)
But no matter how much I tried, I just can't seem to change the "data: chartData.chart1" in such a way that it retrieve the arrays I get from my $.getJSON function. Can any of you help me explain why, for instance, the below code doesn't work?. Here I try to exchange the ChartData.chart1 array for my database data. I'm not experienced enough to tell whether its the whole random number generation part of the code that prevents it from working or if it's my understanding thats severely lacking. (I have made sure that the data from data.php is indeed available, since I can display it in a normal array when I try).
var chart,
chartOptions = {},
chartData = {};
chartData.chart2 = randomData(10, true);
chartData.chart3 = randomData(65, true, 300);
$.getJSON("../../companies/charts/data.php", {id: escape(tableName)}, function(json) {
chartData.chart1 = json[6]['data'];
});
chartOptions.chart1 = {
chart: {
type: 'column'
},
title: {
text: 'Chart 1 Title'
},
yAxis: {
title: {
text: 'Chart 1<br/>Y Axis'
}
},
series: [{
name: 'Chart 1 Series',
data: chartData.chart1
}]
};
我们将不胜感激！
推荐答案
您实际上非常接近可以使用的东西.您的问题与异步调用相对于内联代码的时间有关，还与javascript中分配的工作方式有关.
You're actually very close to something that will work. Your problem is related to the timing of async calls relative to inline code, and also the way assignments work in javascript.
作为一个简单的示例，下面是一些代码:
As a quick example, here's some code:
x = {foo:5};
y = x.foo;
x.foo = 9;
最后，x.foo为9，但y仍为5.
At the end of this, x.foo is 9, but y is still 5.
您的代码行
chartData.chart1 = json[6]['data'];
直到对服务器的调用完成后才执行；它包含在回调函数中.但是，这部分代码
doesn't execute until after the call to the server completes; it's contained within a call back function. However, this section of code
chartOptions.chart1 = {
chart: {
type: 'column'
},
title: {
text: 'Chart 1 Title'
},
yAxis: {
title: {
text: 'Chart 1<br/>Y Axis'
}
},
series: [{
name: 'Chart 1 Series',
data: chartData.chart1
}]
};
立即执行.看到问题了吗?在服务器调用完成之前，您已经将chartData.chart的当前值煮到了chartOptions.chart1中.这就是为什么您看不到数据的原因.
executes immediately. See the problem? You've cooked the current value of chartData.chart into chartOptions.chart1 BEFORE the server call has completed. That's why you're not seeing your data.
相反，请尝试以下操作:
Instead, try something like this:
chartOptions.chart1 = {
chart: {
type: 'column'
},
title: {
text: 'Chart 1 Title'
},
yAxis: {
title: {
text: 'Chart 1<br/>Y Axis'
}
},
series: [{
name: 'Chart 1 Series',
data: []
}]
};
$.getJSON("../../companies/charts/data.php", {id: escape(tableName)}, function(json) {
chartOptions.chart1.series[0].data = json[6]['data'];
});
现在，当数据返回时，您会将其放到实际用于呈现图表的对象中(一旦单击右侧按钮).请记住，在服务器调用完成之前它将为空.
Now when your data comes back, you're putting it into the object that is actually being used to render the chart (once you click on the right button). Keep in mind that it's going to be empty until the server call completes.
这篇关于在Highcharts中检索JSON数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
