ajax上的Google图表仅适用于第一次

Question

这是两个问题，我的代码的实际状态是：

<script type="text/javascript">
init_ui();
function init_ui() {

        $("[rel='tooltip']").tooltip();

        $(".ajax_link").live("click",function(){
            id = $(this).attr("id");
            jQuery("#ajax_div").html('<img src="../../../../bundles/donepunctis/img/loading.gif" alt="loading...">');
            jQuery.ajax({
                url: '<?= $view['router'] -> generate('done_punctis_ajax_detail_data_url'); ?>' + '?id=' + id,
                success:function(result){
                    jQuery("#ajax_div").html('');
                    //alert(data);
                    chart.draw(data, options);
                }
     });
        })
}

var data;
var options;
var chart;

      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create the data table.
        data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);

        // Set chart options
        options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};

        // Instantiate and draw our chart, passing in some options.
        chart = new google.visualization.PieChart(document.getElementById('ajax_div'));

      }
</script>

目前我只是忽略了从ajax调用的返回，使用数据到图表somministrated硬编码var数据。

1. 我应该怎么看看我在php端的回声，返回我现在正在使用的相同值，但是从ajax返回传递？

2. 此代码第一次运行正常，但如果尝试再次点击ajax_link，则会触发ajax调用，但Google图表代码不会执行任何操作。这是为什么？

Answer 1

此代码第一次正常工作，但如果尝试再次点击ajax_link，则会触发ajax调用，但Google图表代码不会执行任何操作。那是为什么？

查看$.ajax来电的成功回调：

jQuery.ajax({
  url: '<?= $view['router'] -> generate('done_punctis_ajax_detail_data_url'); ?>' + '?id=' + id,
  success:function(result){
  jQuery("#ajax_div").html('');
    chart.draw(data, options);
  }
});

您正在调用chart.draw(data, options);，只需使用上次填充的数据重新绘制图表。

您可能想要致电drawChart并传递新数据：

jQuery.ajax({
  url: '<?= $view['router'] -> generate('done_punctis_ajax_detail_data_url'); ?>' + '?id=' + id,
  success:function(result){
  jQuery("#ajax_div").html('');
    drawChart(data);
  }
});

然后在drawChart中，您可以使用新数据填充图表：

function drawChart(myData) {
  // Create the data table.
  data = new google.visualization.DataTable();
  data.addColumn('string', 'Topping');
  data.addColumn('number', 'Slices');
  if(myData) {
    // TODO: add rows based on myData
  } else {
    data.addRows([
      ['Mushrooms', 3],
      ['Onions', 1],
      ['Olives', 1],
      ['Zucchini', 1],
      ['Pepperoni', 2]
    ]);
  }
  ...