每次调用Ajax后重绘Google Chart

Question

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