Question

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

我的问题是某些网页包含Google Visualization插件，但这些插件无效。

我的第一种方法是在子页面中加载可视化API的JavaScript，但这不起作用 - 从apis.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
  });
}

以下是我用来调用上述脚本的脚本（单击选项卡时）。

$('#loadarea').load('tab1.php');
drawChart();

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

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

谢谢，

Answer 1

这有两个问题：

google.setOnLoadCallback(drawChart)正在调用该函数，所以我摆脱了它。
脚本在加载之前试图填充div，所以我在更改标签的脚本中添加了对drawChart()的函数调用：

$('#loadarea').load('tab1.php', function() { drawChart(); });

现在可以使用了。

通过Ajax加载Google Visualisations

1 个答案: