web-dev-qa-db-ja.com

Ajaxを呼び出すたびにGoogle Chartを再描画する

チャートが最初のデフォルトのAjax応答で初めてロードされるとき、それはうまく機能します。 console.log（chart_data）に追加すると、デフォルトのデータが表示され、送信後に新しいデータが表示されます。唯一の問題は、チャートが再び描画されないことです。 drawChart関数が2回実行されないことは知っていますが、その理由はわかりません。もしそうなら、チャート自体が再描画されると思います。答えが明らかな場合は申し訳ありません。私は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);
}

任意の助けをいただければ幸いです。ありがとう！

jqueryajaxgoogle-visualization
23
Robert

ページで一度だけgoogle.loadを実行する必要があります。データをロードしているという事実は、物事を少し複雑にしますが、それほどではありません。 JavaScriptの上部でgoogle.loadを1回実行し、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);
}
32
Sergey G

Console.logまたは何かによって関数が2回目に起動しないことを既に決定している場合は、関数からパラメーターを取り、Googleの例のように呼び出してみてください。

google.setOnLoadCallback(drawChart);

あなたのコードは私にはうまく見えますが、チャートライブラリにあまり精通していないため、setOnLoadCallbackがどのようにパラメータを準備するのか分かりません。

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

1
jphase