jQuery 每次 Ajax 调用后重新绘制 Google Chart
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18840178/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Redraw Google Chart after every Ajax call
提问by Robert
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.
当图表第一次使用初始默认 Ajax 回复加载时，它工作正常。如果我在 console.log(chart_data) 中添加，我会看到我的默认数据，然后在我提交后我会看到新数据。唯一的问题是图表不会再次自行绘制。我知道 drawChart 函数不会第二次运行，我只是不知道为什么。我假设如果是，图表将重新绘制。对不起，如果答案很明显；我对 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);
}
Any help would be appreciated. Thanks!
任何帮助，将不胜感激。谢谢！
回答by Sergey G
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:
您应该只在一个页面中执行 google.load 一次。您正在加载数据这一事实使事情变得有点复杂，但并没有那么复杂。我建议您在 javascript 顶部执行 google.load 一次，并将 load_page_data 设置为回调。然后，您将从那里调用 drawChart。修改后的代码如下所示：
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);
}
回答by jphase
If you've already determined that the function isn't firing the second time by a console.log or something then you might want to try taking the params off your function and call it how Google does in their examples:
如果您已经确定该函数不会通过 console.log 或其他东西第二次触发，那么您可能想尝试从函数中删除参数，并在他们的示例中使用 Google 的方式调用它：
google.setOnLoadCallback(drawChart);
Your code looks fine to me but I'm not sure how setOnLoadCallback preps params as I'm not very familiar with the charts libraries.
您的代码对我来说看起来不错，但我不确定 setOnLoadCallback 如何准备参数，因为我对图表库不是很熟悉。
https://developers.google.com/chart/interactive/docs/basic_load_libs
https://developers.google.com/chart/interactive/docs/basic_load_libs
