Javascript 通过Ajax加载Google可视化

我的应用程序中有几个选项卡，每个选项卡通过jQuery load（）函数加载不同的子页面

我的问题是，一些页面包含谷歌可视化插件，这些插件将无法工作

我的第一种方法是将可视化API的JavaScript放在加载的子页面中，但这不起作用——当从API.google.com加载某些内容时，页面将变为空白并被卡住

我的第二种方法是在可视化应该去的地方插入一个div，然后调用一个脚本（我之前定义的）来填充这个div

以下是生成可视化的脚本：

google.load('visualization', '1', {'packages':['annotatedtimeline']});
google.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('datetime', 'Date');
  data.addColumn('number', 'Temperature');
  data.addColumn('number', 'Humidity');

  data.addRows([
     <?php echo /* raw data outputted by generating functions */ ?>
    ]);


  var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('visualization_div'));
  chart.draw(data, {
    displayAnnotations: true, 
    'scaleColumns': [0,1], 
'scaleType': 'allmaximized',
'displayZoomButtons': false
  });
}

此外，这可能是相关的：在文档的开头，我使用jQuery预加载页面上的一些其他空间：

$(document).ready(function() {
  $('#side-display').load('info.php', {id:<?php echo $id ?>, mode:1});
});

$（文档）.ready（函数（）{
$（'#side display'）.load（'info.php'，{id:，mode:1}）；
});

---

谢谢，

这有两个问题：

google.setOnLoadCallback（drawChart）

正在调用该函数，所以我去掉了它

脚本在加载之前试图填充

div

，因此我在选项卡更改脚本中添加了对

drawChart（）

的函数调用：

$（'#loadarea'）.load（'tab1.php'，function（））{
图纸（）；
});

---

现在可以了。

这有两个问题：

google.setOnLoadCallback（drawChart）

正在调用该函数，所以我去掉了它

脚本在加载之前试图填充

div

，因此我在选项卡更改脚本中添加了对

drawChart（）

的函数调用：

$（'#loadarea'）.load（'tab1.php'，function（））{
图纸（）；
});

---

现在可以了。

这是一个非常好的答案。我已经讨论过其他问题，答案有更多的投票权，但是这一个问题的简单性让它起作用了。谢谢。这是一个很好的回答。我已经讨论过其他问题，答案有更多的投票权，但是这一个问题的简单性让它起作用了。非常感谢。

$(document).ready(function() {
  $('#side-display').load('info.php', {id:<?php echo $id ?>, mode:1});
});