每次Ajax调用后重绘谷歌图Ajax、后重绘谷歌图

2023-09-10 16:07:51 作者:Angel

在图表加载首次与初始默认阿贾克斯的答复,它工作正常。如果我加入的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);
}