Javascript highcharts动态数据填充到折线图中
我使用的是highcharts,当我动态填充数据时,数据不会显示出来。这是我的密码:Javascript highcharts动态数据填充到折线图中,javascript,mysql,database,dynamic,highcharts,Javascript,Mysql,Database,Dynamic,Highcharts,我使用的是highcharts,当我动态填充数据时,数据不会显示出来。这是我的密码: <div id="chart"></div> 类别在x轴(日期)上显示得很好,但没有其他显示。如果我硬编码数据,如下所示: $(document).ready(function(e) { var options = { chart:{ type:'line' }, title:{
<div id="chart"></div>
类别在x轴(日期)上显示得很好,但没有其他显示。如果我硬编码数据,如下所示:
$(document).ready(function(e) {
var options = {
chart:{
type:'line'
},
title:{
text:'Line Chart'
},
xAxis:{
title:'Date',
categories:['08/16','08/17','08/18','08/19']
},
yAxis:{
title:'Val1/Val2'
},
series:[{name:'Val1', data:[23, 56, 73, 12]}, {name:'Val2', data:[12, 65, 23, 49]}]
};
$.ajax({
url:'includes/getData.php', // select * from 'myTable' order by date
dataType:'json',
success:function(data){
$.each(data, function(index, value){
//options.xAxis.categories.push(value.date); // date = 'mm/dd'
//options.series[0].data.push(value.val1); // val1 = integer
//options.series[1].data.push(value.val2); // val2 = integer
});
$('#chart').highcharts(options);
}
});
});
它工作得很好。注意,我硬编码了xaxis类别数组和2系列数据数组,并注释掉了ajax成功处理程序中的3行,其中使用数据库中的数据填充
不知道为什么它是通过非动态方式硬编码工作的。我将数据数组输出到success处理程序中的控制台,数据就在那里,正如预期的那样
你觉得这有什么不对吗
编辑:getData返回的JSON:
0: {0:8, 1:120, 2:80, 3:08/06/2013, 4:1:00 am, id:8, val1:120, val2:80, date:08/06/2013, time:1:00 am}
1: {0:5, 1:120, 2:80, 3:08/08/2013, 4:3:55 am, id:5, val1:120, val2:80, date:08/08/2013, time:3:55 am}
2: {0:9, 1:120, 2:80, 3:08/10/2013, 4:2:00 am, id:9, val1:120, val2:80, date:08/10/2013, time:2:00 am}
3: {0:13, 1:120, 2:80, 3:08/19/2013, 4:12:00 am, id:9, val1:120, val2:80, date:08/10/2013, time:2:00 am}
您能显示GetData返回的json吗?您的代码看起来是正确的。你确定val1/val2是整数吗?@Barbara-不确定如何获取GetData返回的原始JSON,但我只是将数据变量发送到成功处理程序中的控制台,它输出了一个包含4个对象的数组,每个对象代表我数据库中的一条记录。每个对象都有与其关联的正确数据。@blkhwks19,您可以尝试执行
parseInt(value.val1)
,但听起来您已经正确执行了。你把我难住了@马克-我好像忘了尝试你的解决方案,马克尝试了parseInt(value.val1)。刚试过,砰!每件事都很有魅力。我猜这些值没有正确设置为int,因此图表无法识别它们。再次感谢所有提供建议和帮助的人,非常感谢!=]
0: {0:8, 1:120, 2:80, 3:08/06/2013, 4:1:00 am, id:8, val1:120, val2:80, date:08/06/2013, time:1:00 am}
1: {0:5, 1:120, 2:80, 3:08/08/2013, 4:3:55 am, id:5, val1:120, val2:80, date:08/08/2013, time:3:55 am}
2: {0:9, 1:120, 2:80, 3:08/10/2013, 4:2:00 am, id:9, val1:120, val2:80, date:08/10/2013, time:2:00 am}
3: {0:13, 1:120, 2:80, 3:08/19/2013, 4:12:00 am, id:9, val1:120, val2:80, date:08/10/2013, time:2:00 am}