Javascript 在Ajax成功后使用动态数据填充Google图表
我想在Ajax成功后加载一个Google折线图(响应)。我试图将整个Google图表代码放入Ajax调用的成功部分,但没有任何效果。以下是我的Ajax代码:Javascript 在Ajax成功后使用动态数据填充Google图表,javascript,php,jquery,ajax,google-visualization,Javascript,Php,Jquery,Ajax,Google Visualization,我想在Ajax成功后加载一个Google折线图(响应)。我试图将整个Google图表代码放入Ajax调用的成功部分,但没有任何效果。以下是我的Ajax代码: $( window ).on( "load", function() { $.ajax({ url: url, headers: { 'X-CSRF-TOKEN': '{{csrf_token()}}' },
$( window ).on( "load", function() {
$.ajax({
url: url,
headers: {
'X-CSRF-TOKEN': '{{csrf_token()}}'
},
type: "POST",
data: {
'annual_capital_growth':annual_capital_growth,
'property': property,
'forcast_period': forcast_period,
},
context: this,
success:function(data) {
console.log(data.graphArray); /*This is where I inserted Google Charts Code*/
},
error: function(errorThrown){
console.log(errorThrown);
}
});
});
现在我的谷歌图表代码如下:
请注意,我的代码是一个响应代码,在底部有一些额外的函数用于调整窗口大小
google.load('visualization', '1', {
packages: ['corechart', 'line']
});
google.setOnLoadCallback(drawBackgroundColor);
function drawBackgroundColor() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Years');
data.addColumn('number', 'Property Name');
data.addColumn('number', 'Compute Times');
data.addColumn('number', 'Compute Times2'); /*This is where I want to insert Ajax Data*/
console.log("--");
data.addRows([
['2018', 200000, 210000, 220000],
['2019', 210000, 220000, 220000],
['2020', 220000, 250000, 220000], /*This is where I want to insert Ajax Data*/
]);
console.log(data);
var options = {
height: 350,
legend: {
position: 'bottom'
},
hAxis: {
title: 'Years'
},
vAxis: {
title: 'Property Value'
},
backgroundColor: '#f1f8e9'
};
function resize() {
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
window.onload = resize();
window.onresize = resize;
}
首先,您使用的是旧版本的谷歌图表。
jsapi
不应再使用,请参阅
需要改用以下库
<script src="https://www.gstatic.com/charts/loader.js"></script>
什么不起作用?它是否显示任何错误?更具体地说,实际上我在控制台中没有收到错误,页面变成了一个空白的白色页面。你得到了什么响应?没有,我什么也没有,但现在我在我朋友的帮助下稍微更改了代码,现在它正在工作。为了响应,我在我的另一个朋友的帮助下做了,他做了和你一样的事情,除了在您的代码中,我们可以看到我从Ajax得到的响应被存储到一个名为
data
的变量中,但就在它下面,我们可以看到另一个变量data
的声明,所以在这种情况下,同名变量会导致问题。我们也遇到了这个问题,所以我们将Ajax响应变量名改为response
,因为我还必须在其他地方使用Ajax数据。因此,我接受你的回答,我也使用了你让我知道的旧代码。
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var options = {
height: 350,
legend: {
position: 'bottom'
},
hAxis: {
title: 'Years'
},
vAxis: {
title: 'Property Value'
},
backgroundColor: '#f1f8e9'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
$.ajax({
url: url,
headers: {
'X-CSRF-TOKEN': '{{csrf_token()}}'
},
type: "POST",
data: {
'annual_capital_growth':annual_capital_growth,
'property': property,
'forcast_period': forcast_period,
},
context: this
}).done(function (response, status, jqXHR) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Years');
data.addColumn('number', 'Property Name');
data.addColumn('number', 'Compute Times');
data.addColumn('number', 'Compute Times2');
data.addRows(response.graphArray);
function resize() {
chart.draw(data, options);
}
resize();
$(window).resize(resize);
}).fail(function (jqXHR, status, errorThrown) {
console.log(errorThrown);
});
});