Question

当图表第一次加载初始默认Ajax回复时，它运行正常。唯一的问题是图表在第二次ajax调用时不会再次绘制自己。我知道drawChart函数不是第二次运行，我只是不知道为什么。

Below is my code


<script type="text/javascript">
    google.charts.load("current", {packages:['corechart']});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ["Element", "Density", { role: "style" } ],
       <?php for($i=$lastYears;$i<=$year;$i++)
        {
            //echo $leadGraph;die;
           if($leadGraph != 'leadgraph')
           {
             $users = "select * from";
           }else{
               //echo '41';die;
               //$users = $this->Report_model->count_report_users($selectType,$i);
              $users="select * from";
           }
        ?>
        ["<?php echo $i; ?>", <?php echo $users; ?>, "#DE2226"],
        <?php 
        } 
        ?>
      ]);

      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" },
                       2]);
var options = {
        title: "<?php echo $graph; ?>",
        //width: 600,
        //height: 500,
        bar: {groupWidth: "95%"},
        legend: { position: "none" },
      };
      var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
      chart.draw(view, options);
  }
  </script>

它显示我在第二次ajax调用时出现以下错误

Error: google.charts.load() cannot be called more than once with version 45 or earlier.

Answer 1

您无法再调用.load()两次，因此您可以创建一个更新图表数据的函数然后设置 google.setOnLoadCallback(load_chart_data);

function load_chart_data(){
$.ajax({
    url: 'get_data.php',
    data: {'startyear':startyear,'endyear':endyear},
    async: false,
    success: function(data){
        if(data){
            chart_data = $.parseJSON(data);
            updateChart(chart_data, "My Chart", "Data");
        }
    },
});
}
function updateChart(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.ColumnChart(document.getElementById('columnchart_values'));
chart1_chart.draw(chart1_data, chart1_options);
}

如何在模态弹出的每个Ajax调用后重绘Google Chart

1 个答案: