javascript - 如何在模态弹出窗口的每次 Ajax 调用后重绘 Google Chart

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);
}