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

前端之家收集整理的这篇文章主要介绍了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);
}
原文链接:https://www.f2er.com/jquery/182221.html

猜你在找的jQuery相关文章