Highcharts数据系列问题AJAX / JSON和PHP [英] Highcharts data series issue with ajax/json and PHP
问题描述
这是我的第一个请求在这里，我读过很多关于这个同样的问题在其他相关的职位，但我还是被卡住和pretty的多少在我束手无策这个...因此，任何帮助是非常AP preciated！
This is my first request here, and I've read many of the other related posts on this same issue, but I'm STILL getting stuck and pretty much at my wits end on this... So any help is much appreciated!
我已经得到了page1.php以下Highcharts对象，我使用AJAX来获得页面加载从page2.php中将数据以及当下拉选项更改。
I've got the following Highcharts object on Page1.php, and I'm using AJAX to get data from Page2.php on page load as well as when a dropdown option is changed.
（截断为了便于阅读）：
(truncated for ease of reading):
$(document).ready(function() {
var e = document.getElementById("selOption"); //<--- This is the dropdown
var domText = e.options[0].text;
var domID = e.options[e.selectedIndex].value;
var options = {
chart: {
renderTo: 'linechart',
type: 'line'
},
title: {
text: 'Title for ' + domText
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%b %e, %Y',
year: '%Y'
}
},
yAxis: {
title: {
text: 'Important Values'
},
reversed: true,
min: 0,
max: 100
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%b %e', this.x) +': '+ this.y;
}
},
series: []
};
$.get('Page2.php?domID=' + domID,function(data) {
$.each(data, function(key,value) {
//var series = {};
//series.name.push(value);
//series.data.push([value]);
options.series.push(data);
//alert(data);
});
var linechart = new Highcharts.Chart(options);
});
});
page2.php中将有以下发回JSON：
Page2.php has the following sending back the json:
$sqlSelect = "SELECT Item1,Item2,Item3 FROM... ";
$result = mysql_query($sqlSelect);
while ($item = mysql_fetch_assoc($result)) {
$name = $item['Item1'];
$date = str_replace("-",",",$item['Item2']);
$pos = $item['Item3'];
$arr = array("name"=>$name,"data"=>"[Date.UTC(".$date."), ".$pos." ],");
echo json_encode($arr);
}
我的JSON的收益看起来是这样的：
My json return looks like this:
{"name":"Item1","data":"[Date.UTC(2011,11,08), 4 ],"}
{"name":"Item1","data":"[Date.UTC(2011,11,08), 2 ],"}
当我的图表负载，它填补了135系列的名称在底部（？！？！？！）并没有出现，以显示在折线图的各点。
When my chart loads, it fills in 135 Series names (?!?!?!) at the bottom and doesn't appear to show the points on the line graph.
如果我删除了双引号和c的结果成系列阵列的硬盘$ C $，它的伟大工程（虽然我注意到这个例子并没有出现有对象之间用逗号。
If I remove the double quotes and hard code the result into the series array, it works great (though I noticed the example doesn't appear to have a comma between the objects.
感谢您所有帮助......尤其是快速回复！ ; - ）
THANK YOU for all help ...especially quick replies! ;-)
推荐答案
解决的：
我发现，终于研究出一个答案！沮丧的是我花了好几天，因为它没有很好地Highcharts（和/或也许我jQuert和JavaScript的理解还处于菜鸟级）。
I found an answer that finally worked! Frustrating that it took me several days because it wasn't well documented by Highcharts (and/or maybe my understanding of jQuert and JavaScript is still at a novice level).
答案是的的不的发送了X / Y数据为preformed数组中的JSON对象，而是只需发送构成的数字日期（x值）和值（y值）为逗号分隔值的JSON对象的列表，然后做了分析和推客户端。
The answer is do not send the X/Y data as a preformed array in your json object, but instead simply send the numbers that make up the Date (x value) and the Value (y value) as a list of comma separated values in a json object, and then do the parsing and pushing on the client end.
例如：我本来试图让我的PHP发送类似 [{名：名1，数据：[日期.UTC（2011,11,08），4]，[Date.UTC（2011,11,09），4]，[Date.UTC（2011,11,10），4]，[ Date.UTC（2011,11,11），4]，[Date.UTC（2011,11,14），3]} ...
For example: I originally was trying to get my PHP to send something like [{"name":"Name 1","data":["[Date.UTC(2011,11,08), 4 ]","[Date.UTC(2011,11,09), 4 ]","[Date.UTC(2011,11,10), 4 ]","[Date.UTC(2011,11,11), 4 ]","[Date.UTC(2011,11,14), 3 ]"]}...
但我真正需要做的是送东西像 [{名：名1，数据：2011,11,08，4，2011,11 ，09,4......
but what I really needed to do was send something like [{"name":"Name 1","data":["2011,11,08, 4","2011,11,09,4"....
第一步是确保你有系列选项设置为空数组系列：[]
The first step is to make sure you have the "series" option set to an empty array series: []
（我提到这一点，因为我看到其他的答案在哪里这样做是不同的）。
(I mention this because I've seen other answers where this was done differently).
然后在你的getJSON功能，你需要创建一个新的对象，每个对象你拉的，其中还包括一个空的数据数组（参见VAR系列下）。
Then in your getJSON function, you need to create a new object for each object you're pulling in, which also includes an empty "data" array (see "var series" below).
然后巢几$。每次循环来解析和数据推入其必要的阵列，和填充每个对象的名字：
Then nest a few $.each loops to parse and push the data into their necessary arrays, and populate the "name" of each object:
$.getJSON('http://www.mydomain.com/getdata.php?ID=' + id, function(data) {
$.each(data, function(key,value) {
var series = { data: []};
$.each(value, function(key,val) {
if (key == 'name') {
series.name = val;
}
else
{
$.each(val, function(key,val) {
var d = val.split(",");
var x = Date.UTC(d[0],d[1],d[2]);
series.data.push([x,d[3]]);
});
}
});
options.series.push(series);
});
在上面的code，您需要实例图表：
VAR图=新Highcharts.Chart（选件）;
After the above code, you need to instantiate the chart:
var chart = new Highcharts.Chart(options);
这应该是它！
希望别人发现这个答案很有用，并不需要击败自己的头几天试图弄明白。 ： - ）
Hopefully somebody else finds this answer useful and doesn't need to beat themselves over the head for days trying to figure it out. :-)
这篇关于Highcharts数据系列问题AJAX / JSON和PHP的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
