这是我的第一个要求,我已经阅读了与此问题相关的许多其他相关文章,但我仍然陷入困境,几乎无能为力…因此,非常感谢您的帮助!
我在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 '<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的信息:
$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系列名称(?!?!?!),并且在折线图中似乎不会显示点。
如果我删除双引号并将结果硬编码到series数组中,则效果很好(尽管我注意到该示例在对象之间似乎没有逗号。
谢谢您的所有帮助…特别是快速的回复!;-)
解决了:
我找到了一个最终成功的答案!令人沮丧的是,我花了几天的时间,因为Highcharts并没有很好地对其进行记录(和/或也许我对jQuert和JavaScript的理解仍处于新手水平)。
答案是 不要 在您的json对象中将X / Y数据作为预制数组发送,而只是将构成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: []
series: []
(我之所以这样提,是因为我看到了其他答案,但答案有所不同)。
然后,在getJSON函数中,需要为要引入的每个对象创建一个新对象,其中还包括一个空的“数据”数组(请参见下面的“ var系列”)。
然后嵌套一些$.each循环以解析并将数据推入其必要的数组,并填充每个对象的“名称”:
$.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);
就是这样!
希望其他人会发现这个答案有用,并且不需要几天来试图解决这个问题。:-)