每次 Ajax 调用后重绘 Google Chart答案

【问题标题】：Redraw Google Chart after every Ajax call每次 Ajax 调用后重绘 Google Chart
【发布时间】：2013-09-21 07:41:56
【问题描述】：

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

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

【问题讨论】：

标签： jquery ajax google-visualization

【解决方案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);
}

【讨论】：

【解决方案2】：

如果您已经通过 console.log 或其他方式确定该函数没有第二次触发，那么您可能想尝试将参数从您的函数中移除，并将其称为 Google 在他们的示例中所做的：

google.setOnLoadCallback(drawChart);

您的代码对我来说看起来不错，但我不确定 setOnLoadCallback 如何准备参数，因为我对图表库不太熟悉。

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

【讨论】：