当图表第一次加载初始默认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);
}
任何帮助将不胜感激。谢谢!
答案 0 :(得分:32)
你应该只在页面中执行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);
}
答案 1 :(得分:1)
如果你已经确定该功能没有通过console.log或其他东西第二次触发,那么你可能想尝试从你的功能中删除params并将其称为Google在他们的示例中所做的事情:
google.setOnLoadCallback(drawChart);
您的代码对我来说很好,但我不确定setOnLoadCallback如何准备params,因为我对图表库不是很熟悉。
https://developers.google.com/chart/interactive/docs/basic_load_libs