我在一个页面上生成了一个Google组合图,并通过AJAX调用从另一个页面获取数据。
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: "generate_gp_graph.php",
dataType: "json",
async: false
}).responseText;
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
var options = {
vAxis: {title: 'Value (€)'},
hAxis: {title: 'Audit Date'},
legend:{position: 'top', maxLines:2},
seriesType: 'bars',
series: {
3: {type: 'line', targetAxisIndex:0},
4: {type: 'line', targetAxisIndex:1}
},
vAxes: {
1: {
title:'Gross Profit %',
textStyle: {color: 'green'}
}
}};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
我现在想做的是刷新数据并在单击按钮时重新绘制图形。我尝试了以下
$('#year_to_date').click(function(event){
var page = 'generate_gp_graph.php';
$.ajax({
url : page,
data : {'action' : 'year_to_date','store_id' : "<?php echo $store_id ?>"},
type : 'post',
success: function(result) {
function drawChart() {
var jsonData = $.ajax({
url: "generate_gp_graph.php",
dataType: "json",
async: false
}).responseText;
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
var options = {
vAxis: {title: 'Value (€)'},
hAxis: {title: 'Audit Date'},
legend:{position: 'top', maxLines:2},
seriesType: 'bars',
series: {
3: {type: 'line', targetAxisIndex:0},
4: {type: 'line', targetAxisIndex:1}
},
vAxes: {
1: {
title:'Gross Profit %',
textStyle: {color: 'green'}
}
}};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}},
error: function() {}
});
});
,并且函数正常启动并返回了正确的数据时,不会使用新的详细信息再次绘制图形。为了重绘图形,我在AJAX成功中缺少什么?