通过 Ajax 加载 Google 可视化效果

发布于 2024-08-28 01:03:56 字数 1273 浏览 5 评论 0原文

我的应用程序中有几个选项卡，每个选项卡通过 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});
});

谢谢，

原文

I have several tabs in my application, and each tab loads a different sub-page via jQuery load() function.

My problem is that some of the pages contain Google Visualization plugins and these will not work.

My first approach was to have the JavaScript for the Visualization API in the sub-page being loaded, but that did not work - the page would go blank and get stuck while loading something from apis.google.com

My second approach was to just insert a div where the visualization is supposed to go, then call a script (that I defined earlier) which would populate this div.

Here is the script that generates the visualization:

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

Here is the script that I use to call the above script (when a tab is clicked).

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

Also, this might be related: At the beginning of the document, I use jQuery to pre-load some other spaces on the page:

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

Thanks,

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

绝情姑娘 2024-09-04 01:03:56

这里有两个问题：

google.setOnLoadCallback(drawChart) 正在调用该函数，因此我摆脱了它。
脚本在加载之前尝试填充 div，因此我在制表符更改脚本中添加了对 drawChart() 的函数调用：
$('#loadarea').load('tab1.php', function() { 绘制图表（）； });

现在可以了。