1

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

我的问题是某些页面包含谷歌可视化插件,这些将不起作用。

我的第一种方法是在子页面中加载 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});
});

谢谢,

4

1 回答 1

5

这有两个问题:

  1. google.setOnLoadCallback(drawChart)正在调用该函数,所以我摆脱了它。

  2. 该脚本试图在加载之前填充它,所以我在标签更改脚本中div添加了函数调用:drawChart()

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

这现在有效。

于 2010-04-09T22:03:00.517 回答