使用ajax / json和PHP的Highcharts数据系列问题
这是我在这里的第一个请求，我已经阅读了很多关于同一问题的其他相关post，但我仍然陷入困境，而且我的智慧结束了…所以任何帮助都非常感谢！
我在Page1.php上有以下Highcharts对象，我在页面加载时使用AJAX从Page2.php获取数据，以及更改下拉选项时。
（为便于阅读而截断）：
$(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 ''+ this.series.name +'
'+ 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：
$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返回看起来像这样：
{"name":"Item1","data":"[Date.UTC(2011,11,08), 4 ],"} {"name":"Item1","data":"[Date.UTC(2011,11,08), 2 ],"}
当我的图表加载时，它会在底部填充135系列名称（？！？！？！），并且似乎不会显示折线图上的点。
如果我删除双引号并将结果硬编码到系列数组中，它的效果很好（尽管我注意到该示例似乎没有对象之间的逗号。
谢谢大家帮忙…特别快速的回复！ 😉
解决了：
我找到了一个终于有效的答案！ 令人沮丧的是，我花了好几天才因为Highcharts没有很好地记录（和/或者我对jQuert和JavaScript的理解仍然处于新手级别）。
答案是不要将X / Y数据作为预先形成的数组发送到json对象中，而是简单地将组成Date（x值）和Value（y值）的数字作为逗号分隔值的列表发送到一个json对象，然后进行解析并推送客户端。
例如：我最初试图让我的PHP发送类似的东西
[{"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 ]"]}
但我真正需要做的就是发送类似的东西
[{"name":"Name 1","data":["2011,11,08, 4","2011,11,09,4"....`
第一步是确保将“系列”选项设置为空数组series: []
（我之所以提到这一点，是因为我已经看到了其他答案，其中有不同的做法）。
然后在你的getJSON函数中，你需要为你所引入的每个对象创建一个新对象，其中还包括一个空的“数据”数组（参见下面的“var系列”）。
然后嵌套一些$.each循环来解析并将数据推送到必要的数组中，并填充每个对象的“名称”：
$.getJSON('http://exmaple.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); });
在上面的代码之后，您需要实例化图表：
var chart = new Highcharts.Chart(options);
这应该是它！
希望其他人觉得这个答案很有用，并且不需要在头脑中打了几天试图找出答案。 🙂
由于Javascript UTC方法将以Integer返回，因此当您在服务器端生成JSON而不是尝试在JSON中传递函数（UTC.Date）时，将Unix时间戳作为整数传递会更好 – 这使得整个JSON无效！
所以
而不是这个
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); }
做这个：
while ($item = mysql_fetch_assoc($result)) { $name = $item['Item1']; $unix_date = date("Ymd", strtotime($item['Item2'])); $pos = $item['Item3']; $arr = array("name"=>$name,"data"=>"[".($unix_date*1000).", ".$pos." ],"); echo json_encode($arr); }
请注意我们将PHP unix时间戳乘以1000以使其与JS兼容。
参考： http ： //www.w3schools.com/jsref/jsref_utc.asp
只需检查Highcharts的一些示例代码， series需要是一个JSON对象数组，每个对象包含{"name":"Item1","data":"[Date.UTC(2011,11,08), 4 ],"}等等
主要问题是page2的输出，不是数组。
您需要首先修复$ .each，您需要推送value ，而不是data ：
$.each(data, function(key,value) { options.series.push(value); });
这将正确地将每个项目串联设置为完整的json对象。
然后修复输出：
$output = []; while ($item = mysql_fetch_assoc($result)) { $name = $item['Item1']; $date = str_replace("-",",",$item['Item2']); $pos = $item['Item3']; //I don't think there's supposed to be a comma after this square bracket $arr = array("name"=>$name,"data"=>"[Date.UTC(".$date."), ".$pos." ]"); array_push($output, json_encode($arr)); } echo "["; foreach($output as $val){ echo $val; if($val != end($output)) echo ","; } echo "]";
这应该做到这一点。
检查PHP5.5
您可以使用数据系列将其添加到json中
$date = '31-12-2015 00:00:00'; $datetimeUTC = (strtotime($date) * 1000); $data[] = [$datetimeUTC, (float) $value];
我遇到了发送由mktime（）生成的时间戳的问题，因为highcharts需要UTC时间而PHP时间戳不是UTC。 数据可能会在图表中的错误日显示，因此您还必须考虑时区。
function _convertToUTC($timeStamp) { return (int)$timeStamp + (int)date('Z', $timeStamp); }
代码示例如下：
$serie = array( 'name' => 'title', 'data' => array( // multiply timestamp by 1000 to get milliseconds array(_convertToUTC(mktime(0,0,0,1,1,2016)) * 1000, 15), array(_convertToUTC(mktime(0,0,0,2,1,2016)) * 1000, 18), array(_convertToUTC(mktime(0,0,0,3,1,2016)) * 1000, 13), ), ); echo json_encode($serie);