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

但是我认为两次调用函数不是好事。

drawChart函数

 <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请求的代码，但听起来您在谷歌api完全加载之前尝试绘制图表。请记住，您应该始终使用api提供的回调绘制图表，如下所示：

google.charts.setOnLoadCallback(drawChart);

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

页面加载上的谷歌图表图表视图

1 个答案: