23

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

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

4

2 回答 2

35

您应该只在一个页面中执行一次 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);
}
于 2013-09-19T15:04:33.537 回答
1

如果您已经确定该函数没有被 console.log 或其他东西第二次触发，那么您可能想尝试从您的函数中删除参数并调用它，就像 Google 在他们的示例中所做的那样：

google.setOnLoadCallback(drawChart);

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

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

于 2013-09-17T03:58:23.140 回答