javascript - 谷歌图表页面加载时的图形 View

Question

我使用谷歌图表库在我的网页上实现了图形。它通过 AJAX 添加到页面，进入 <div> .

我想在页面加载时显示图表，为此我写道:

<script type="text/javascript">

    window.onload =function()
    {
      callgraph();
    }         
</script>

callgraph-我绘制图表的函数。

function callgraph() {
    var msg   = $('#formx').serialize();
    $.ajax({
      type: 'POST',
      url: '/graph/data',
      data: msg,
      success: function(data) {
        $('#results').html(data);
      },
      error:  function(xhr, str){
      //  alert('xhr.responseCode);
      }
    });
}

它可以工作，但有时刷新页面时图表不会加载。当我在表单中更改数据并调用我的函数时，它总是正常工作。

然后我延迟调用我的函数两次。使用此方法图每次都会出现。

 window.onload =function(){ 
    setTimeout(callgraph, 250);callgraph();
 }

但我认为调用函数两次并不是好方法。

绘制图表函数

 <script type="text/javascript">
  	
 google.charts.load('current', {'packages':['line'],callback: drawChart});

 function drawChart() {
     var data = new google.visualization.DataTable();
     data.addColumn('string', 'Day'); 
     data.addColumn('number', 'Heads');
     data.addRows([

     <?php

     while($row = mysqli_fetch_array($data))
     {  
         echo '[ \''.$row['Date'].'\' , ';     
         echo $row['HeadCount'].'  ],';      
     }
     ?>
     ]);

     var options = {
         title: '',
         height: 640,
         vAxis: {
             viewWindow: {
                 min: 0,
             }
         },
     };

     var chart = new google.charts.Line(document.getElementById('chart_div'));
     chart.draw(data, google.charts.Line.convertOptions(options));
}
</script>

你能告诉我该怎么做吗？

Answer 1

我们无法知道来自您的 ajax 请求的代码，但听起来您正在尝试在 google api 完全加载之前绘制图表。请记住，您应该始终使用 api 提供的回调来绘制图表，如下所示:

google.charts.setOnLoadCallback(drawChart);

这可能是图表在超时后加载的原因。