在图表加载首次与初始默认阿贾克斯的答复,它工作正常。如果我加入的console.log(chart_data),我看到我的默认数据,再经过我提出我看到新的数据。唯一的问题是图表不会再次绘制自身。我知道drawChart功能不跑第二次,我只是不知道是什么原因。我假设,如果是,则图表将重绘自身。很抱歉,如果答案是显而易见的;我是很新的jQuery的/阿贾克斯。
When the chart loads the first time with the initial default Ajax reply, it works fine. If I add in console.log(chart_data), I see my default data, then after my submit I see the new data. The only problem is the chart doesn't draw itself again. I know the drawChart function is not ran a second time, I just don't know why. I'm assuming if it is, the chart will redraw itself. Sorry if the answer is obvious; I am very new to jQuery/Ajax.
var chart_data;
var startdate = "default";
var enddate = "default";
function load_page_data(){
$.ajax({
url: 'get_data.php',
data: {'startdate':startdate,'enddate':enddate},
async: false,
success: function(data){
if(data){
chart_data = $.parseJSON(data);
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(function(){ drawChart(chart_data, "My Chart", "Data") })
}
},
});
}
load_page_data();
function drawChart(chart_data, chart1_main_title, chart1_vaxis_title) {
var chart1_data = new google.visualization.DataTable(chart_data);
var chart1_options = {
title: chart1_main_title,
vAxis: {title: chart1_vaxis_title, titleTextStyle: {color: 'red'}}
};
var chart1_chart = new google.visualization.BarChart(document.getElementById('chart1_div'));
chart1_chart.draw(chart1_data, chart1_options);
}
任何帮助将是AP preciated。谢谢!
Any help would be appreciated. Thanks!
您应该只在一个页面做google.load一次。你正在加载数据的事实将复杂的事情一点点,但不是很大。我建议你在你的javascript的顶部做google.load一次,并有load_page_data设置为回调。然后,你会打电话drawChart从那里。修改后的code看起来像下面这样:
you should only be doing google.load once in a page. The fact that you're loading data complicates things a little bit, but not by much. I would recommend that you do the google.load once at the top of your javascript, and have load_page_data set as the callback. Then, you would call drawChart from there. The modified code would look something like the following:
var chart_data;
var startdate = "default";
var enddate = "default";
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(load_page_data);
function load_page_data(){
$.ajax({
url: 'get_data.php',
data: {'startdate':startdate,'enddate':enddate},
async: false,
success: function(data){
if(data){
chart_data = $.parseJSON(data);
drawChart(chart_data, "My Chart", "Data");
}
},
});
}
function drawChart(chart_data, chart1_main_title, chart1_vaxis_title) {
var chart1_data = new google.visualization.DataTable(chart_data);
var chart1_options = {
title: chart1_main_title,
vAxis: {title: chart1_vaxis_title, titleTextStyle: {color: 'red'}}
};
var chart1_chart = new google.visualization.BarChart(document.getElementById('chart1_div'));
chart1_chart.draw(chart1_data, chart1_options);
}