如何在google图表中使用ajax请求中的值?
我正在使用Ajax创建一个对象数组,用作google折线图中的值,但是这些值不会呈现,即使我可以通过控制台查看它们 我曾尝试使用ajax complete函数在设置值后调用图表,但仍然不起作用,我怀疑这是由于作用域,但我不知道如何解决它。这是我的密码 完整阵列如何在google图表中使用ajax请求中的值?,ajax,google-visualization,Ajax,Google Visualization,我正在使用Ajax创建一个对象数组,用作google折线图中的值,但是这些值不会呈现,即使我可以通过控制台查看它们 我曾尝试使用ajax complete函数在设置值后调用图表,但仍然不起作用,我怀疑这是由于作用域,但我不知道如何解决它。这是我的密码 完整阵列 studentCount[ { month:1, count:5 }, { month:2, count:3 }, { month:3, count:9 },
studentCount[
{
month:1,
count:5
},
{
month:2,
count:3
},
{
month:3,
count:9
},
{
month:4,
count:0
}
{
month:5,
count:4
}
etc...
]
代码
$.ajax({
数据类型:“json”,
url:url,
成功:功能(数据){
对于(变量i=0;i
建议加载google
首先,您可以在load
语句中直接包含回调
加载后,调用ajax
请参阅以下工作片段,根据需要进行调整以获得正确的数据,并将
error
更改为success
,因为无法从此处访问url
google.charts.load('current'{
回调:函数(){
var url=‘某个url’;
$.ajax({
数据类型:“json”,
url:url,
错误:函数(数据){//希望这有帮助,我注意到在选项中有不止一种颜色
——用于在同一系列中使用多种颜色
。不确定如何构建json,例如使用php,但如果您以google接受的格式构建json,那么您可以直接从json创建数据表——请参见我是通过php构建json的,它从数据库中获取值,您的解决方案起初不起作用,但我只是偶然发现了一些文本,并发现ajax不是问题所在,我的studentCount[0].count是一个字符串,而不是谷歌不接受的数字。因此,在我转换后,您的解决方案有效,我注意到我原来的解决方案也有效。谢谢您的帮助
$.ajax({
dataType: "json",
url: url,
success: function (data) {
for (var i = 0; i < data.length; i++) {
studentCount[data[i].month -1].count = data[i].count;
}
}
});
$( document ).ajaxComplete(function() {
google.charts.load('current', {
packages: ['line']
});
google.charts.setOnLoadCallback(drawLineColors);
console.log(JSON.stringify(studentCount[0].count)) //returns correct value
function drawLineColors() {
var data = google.visualization.arrayToDataTable([
['Month', '2015'],
['January', studentCount[0].count],
['Febuary', studentCount[1].count],
['March', studentCount[2].count],
['April', studentCount[3].count],
['May', studentCount[4].count],
['June', studentCount[5].count],
['July', studentCount[6].count],
['August', studentCount[7].count],
['Septembre', studentCount[8].count],
['October', studentCount[9].count],
['November', studentCount[10].count],
['December', studentCount[11].count]
]);
var options = {
hAxis: {
title: 'Month'
},
vAxis: {
title: 'Number of Students'
},
colors: ['#4285f4', '#db4437']
};
var chart = new google.charts.Line(document.getElementById('chart_div'));
chart.draw(data, google.charts.Line.convertOptions(options));
}
});