Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/ajax/6.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Jquery 在每次Ajax调用后重新绘制Google图表_Jquery_Ajax_Google Visualization - Fatal编程技术网

Jquery 在每次Ajax调用后重新绘制Google图表

Jquery 在每次Ajax调用后重新绘制Google图表,jquery,ajax,google-visualization,Jquery,Ajax,Google Visualization,当图表第一次加载初始默认Ajax回复时,它工作正常。如果我添加了console.log(图表数据),我会看到默认数据,然后在提交后会看到新数据。唯一的问题是图表不再自动绘制。我知道drawChart函数不会再次运行,我只是不知道为什么。我想如果是的话,图表会重新绘制。如果答案是显而易见的,那么很抱歉;我对jQuery/Ajax非常陌生 var chart_data; var startdate = "default"; var enddate = "default"; function loa

当图表第一次加载初始默认Ajax回复时,它工作正常。如果我添加了console.log(图表数据),我会看到默认数据,然后在提交后会看到新数据。唯一的问题是图表不再自动绘制。我知道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);
}

任何帮助都将不胜感激。谢谢

如果您已经确定console.log或其他东西没有第二次触发函数,那么您可能希望尝试从函数中删除参数,并在示例中称之为Google:

google.setOnLoadCallback(drawChart);
您的代码在我看来很好,但我不确定setOnLoadCallback如何准备参数,因为我对图表库不是很熟悉


您应该在一个页面中只执行一次google.load。事实上,您正在加载数据会使事情稍微复杂一些,但不会太复杂。我建议您在javascript顶部执行一次google.load,并将load_page_数据设置为回调。然后,你可以从那里调用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);
}