모든 Ajax 호출 후 Google 차트 다시 그리기

모든 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);
}

어떤 도움이라도 주시면 감사하겠습니다.감사합니다!

당신은 한 페이지에 한 번만 구글.load를 해야 합니다.데이터를 로드한다는 사실은 상황을 약간 복잡하게 만들지만, 크게는 그렇지 않습니다.저는 당신이 자바스크립트 상단에서 구글.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);
}

console.log 등에 의해 두 번째로 기능이 실행되지 않는다고 이미 판단한 경우 기능에서 매개 변수를 제거하고 Google이 수행하는 예를 다음과 같이 부르는 것이 좋습니다.

google.setOnLoadCallback(drawChart);

당신의 코드는 괜찮아 보이지만 차트 라이브러리에 익숙하지 않기 때문에 setOnLoadCallback이 어떻게 파라미터를 준비하는지 잘 모르겠습니다.

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

언급URL : https://stackoverflow.com/questions/18840178/redraw-google-chart-after-every-ajax-call