在 jQueryUI 选项卡中通过 AJAX 加载 Google 可视化
Posted
技术标签:
【中文标题】在 jQueryUI 选项卡中通过 AJAX 加载 Google 可视化【英文标题】：Loading Google Visualizations via AJAX in jQueryUI tabs 【发布时间】：2011-03-22 18:56:10 【问题描述】：我正在尝试使用 jQueryUI 选项卡，通过 AJAX 加载选项卡。
我遇到的问题是放置在这些选项卡上的 Google 可视化 - 通过 AJAX 检索时它们不会出现。
我已经设置了一个简单的演示：
http://htmlto.com/ui/index.php 是标签页。选项卡 1 应加载此处看到的页面：http://htmlto.com/ui/tab1.php
但是，事实并非如此。我见过类似的解决方案，涉及更改 AJAX 调用，除了我的 AJAX 调用是 jQueryUI 的一部分，所以我需要一个与他们的设置配合得很好的解决方案。
我将加载许多不同的、动态生成的可视化；数据填充需要发生在选项卡上，而不是主页的页脚，否则加载时间将站不住脚。
我该怎么办？
【问题讨论】：
【参考方案1】：您将用作标签的页面不应包含 HTML、HEAD 或 BODY 标记。我很确定它们应该只是作为原始 HTML 存在。
编辑
好的，index.php HEAD 部分应该是这样的（页面的其余部分保持不变）：
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="/ui/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/ui/js/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript" src="/ui/development-bundle/ui/jquery.ui.tabs.js"></script>
<script type="text/javascript" src="/ui/development-bundle/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/ui/development-bundle/ui/jquery.ui.core.js"></script>
<link type="text/css" href="/ui/css/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet" />
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type="text/javascript">
$(document).ready(function ()
$("#tabs").tabs(
ajaxOptions:
error: function (xhr, status, index, anchor)
$(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible. If this wouldn't be a demo.");
);
);
google.load('visualization', '1', 'packages': ['annotatedtimeline'] );
</script>
<title></title>
</head>
lazarus.php 应该是这样的：
<script type='text/javascript'>
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Sold Pencils');
data.addColumn('string', 'title1');
data.addColumn('string', 'text1');
data.addColumn('number', 'Sold Pens');
data.addColumn('string', 'title2');
data.addColumn('string', 'text2');
data.addRows([
[new Date(2008, 1, 1), 30000, undefined, undefined, 40645, undefined, undefined],
[new Date(2008, 1, 2), 14045, undefined, undefined, 20374, undefined, undefined],
[new Date(2008, 1, 3), 55022, undefined, undefined, 50766, undefined, undefined],
[new Date(2008, 1, 4), 75284, undefined, undefined, 14334, 'Out of Stock', 'Ran out of stock on pens at 4pm'],
[new Date(2008, 1, 5), 41476, 'Bought Pens', 'Bought 200k pens', 66467, undefined, undefined],
[new Date(2008, 1, 6), 33322, undefined, undefined, 39463, undefined, undefined]
]);
var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
chart.draw(data, displayAnnotations: true );
</script>
<div id='chart_div' style='width: 700px; height: 240px;'></div>
这对我有用。
【讨论】：
【参考方案2】：为我工作
<script type="text/javascript" src="https://www.google.com/jsapi?ext.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
google.load('visualization', '1.0', 'packages':['corechart']);
google.setOnLoadCallback(drawChart);
function drawChart()
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var data1 = google.visualization.arrayToDataTable([
['Tasks', 'Hours per Day'],
['Works', 12],
['Eats', 20],
['Commutes', 21],
['Watch TVs', 12],
['Sleeps', 17]
]);
var options = 'title':'Score Chart',
'width':600,
'height':300;
$(".tabs a[title='content_2']").click()
$(".tabs a[title='content_1']").click()
var chart = new google.visualization.BarChart(document.getElementById('chart'));
chart.draw(data, options);
var chart1= new google.visualization.BarChart(document.getElementById('chart1'));
chart1.draw(data1, options);
// When the document loads do everything inside here ...
$(document).ready(function()
// When a link is clicked
$("a.tab").click(function ()
// switch all tabs off
$(".active").removeClass("active");
// switch this tab on
$(this).addClass("active");
// slide all content up
$(".content").slideUp();
// slide this content up
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();
);
);
</script>
<div id="tabbed_box_1" class="tabbed_box">
<br />
<div class="tabbed_area">
<ul class="tabs">
<li><a href="#" title="content_1" class="tab active">Tab1</a></li>
<li><a href="#" title="content_2" class="tab">Tab2</a></li>
<li><a href="#" title="content_3" class="tab">Tab3</a></li>
</ul>
<div id="content_1" class="content">
<div id="chart"></div>
</div>
<div id="content_2" class="content">
<div id="chart1"></div>
</div>
<div id="content_3" class="content">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
</ul>
</div>
</div>
【讨论】：
以上是关于在 jQueryUI 选项卡中通过 AJAX 加载 Google 可视化的主要内容，如果未能解决你的问题，请参考以下文章