Google图表-在AJAX调用中重绘图表

时间:2018-09-27 09:04:11

标签: javascript google-visualization

我在一个页面上生成了一个Google组合图,并通过AJAX调用从另一个页面获取数据。

google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var jsonData = $.ajax({
      url: "generate_gp_graph.php",
      dataType: "json",
      async: false
      }).responseText;

  // Create our data table out of JSON data loaded from server.
 var data = new google.visualization.DataTable(jsonData);
 var options = {

  vAxis: {title: 'Value (€)'},
  hAxis: {title: 'Audit Date'},
  legend:{position: 'top', maxLines:2},
  seriesType: 'bars',
  series: {
      3: {type: 'line', targetAxisIndex:0},
      4: {type: 'line', targetAxisIndex:1}
      },
  vAxes: {
    1: {
      title:'Gross Profit %',
      textStyle: {color: 'green'}
    }
}};
  // Instantiate and draw our chart, passing in some options.
  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
   chart.draw(data, options);
}

我现在想做的是刷新数据并在单击按钮时重新绘制图形。我尝试了以下

$('#year_to_date').click(function(event){
    var page = 'generate_gp_graph.php';
    $.ajax({
        url : page,
        data : {'action' : 'year_to_date','store_id' : "<?php echo $store_id ?>"},
        type : 'post',
        success: function(result) {
            function drawChart() {
              var jsonData = $.ajax({
                  url: "generate_gp_graph.php",
                  dataType: "json",
                  async: false
                  }).responseText;

              // Create our data table out of JSON data loaded from server.
              var data = new google.visualization.DataTable(jsonData);
             var options = {

              vAxis: {title: 'Value (€)'},
              hAxis: {title: 'Audit Date'},
              legend:{position: 'top', maxLines:2},
              seriesType: 'bars',
              series: {
                  3: {type: 'line', targetAxisIndex:0},
                  4: {type: 'line', targetAxisIndex:1}
                  },
              vAxes: {
                1: {
                  title:'Gross Profit %',
                  textStyle: {color: 'green'}
                }
            }};
              // Instantiate and draw our chart, passing in some options.
              var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
               chart.draw(data, options);
        }},
        error: function() {}
    });
});

,并且函数正常启动并返回了正确的数据时,不会使用新的详细信息再次绘制图形。为了重绘图形,我在AJAX成功中缺少什么?

0 个答案:

没有答案