jquery – 每次Ajax调用后重绘Google图表

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

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

解决方法

你只应该在一个页面中做一次google.load。事实上，你正在加载数据会使事情变得复杂一点，但不会太多。我建议您在javascript的顶部执行一次google.load，并将load_page_data设置为回调。那么你可以从那里调用drawChart。修改后的代码将如下所示：

var chart_data;
var startdate = "default";
var enddate = "default";
google.load("visualization",{packages:["corechart"]});
google.setOnLoadCallback(load_page_data);

function load_page_data(){
    $.ajax({
        url: 'get_data.PHP',success: function(data){
            if(data){
                chart_data = $.parseJSON(data);
                drawChart(chart_data,"Data");
            }
        },});
}

function drawChart(chart_data,chart1_options);
}

jquery – 每次Ajax调用后重绘Google图表

解决方法

猜你在找的jQuery相关文章