每次调用Ajax后重绘Google Chart

当图表第一次加载初始默认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); } 

任何帮助，将不胜感激。 谢谢！

Answer 1

你应该只在页面上做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); } 

Answer 2

如果你已经确定该函数没有通过console.log或其他东西第二次触发，那么你可能想尝试从你的函数中删除params并将其称为Google在他们的示例中的表现：

 google.setOnLoadCallback(drawChart); 

您的代码对我来说很好，但我不确定setOnLoadCallback如何准备params，因为我对图表库不是很熟悉。

https://developers.google.com/chart/interactive/docs/basic_load_libs