在 jQueryUI 选项卡中通过 AJAX 加载 Google 可视化
上面的链接是一个类似的疑问,我有一个类似的疑问,我需要首先使用带有 ajax 的 jqueryui 选项卡的谷歌可视化核心图表它不是所有的工作我有同样的问题,但是链接中提供的解决方案它部分工作它完美地工作对于该示例中提供的可视化图表,但不是柱形图或饼图的核心图表,我对这些图表有什么不同吗
索引页包含此脚本
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="js/jquery-ui.js"></script>
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
$(function() {
$("#switch").tabs({
beforeLoad: function( event, ui ) {
ui.jqXHR.error(function() {
ui.panel.html(
"Couldn't load this tab. We'll try to fix this as soon as possible. " + "If this wouldn't be a demo."
);
});
}
});
}); //for swicthes
google.load("visualization", "1", {packages:["corechart"]});
并且ajax页面包含
<script type='text/javascript'>
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
和要显示的 div -
<div id='chart_div' style='width: 700px; height: 240px;'></div>