我之前已经问过这个问题，但没有人告诉我如何通过load function实际显示谷歌图表。我使用谷歌图表API，图表在普通页面上显示正常..但是，当我通过Jquery加载函数调用包含图表代码的页面时，没有显示，但是在其他页面上显示相同的确切代码..我需要使用加载函数，因为只要你点击一个图像为了比较两个人，图表必须从他们通过Jquery加载的页面中出现。
以下是我通过加载功能调用的Google图表代码，如果有人能够确定问题所在，我会非常感激。
//This is the compare_proc.php created the charts
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="css/madscore.css">
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<!-- load Google AJAX API -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
//load the Google Visualization API and the chart
google.load('visualization', '1', {'packages':['columnchart','piechart']});
//set callback
google.setOnLoadCallback (createChart);
//callback function
function createChart() {
//create data table object
var dataTable = new google.visualization.DataTable();
//create data table object
var dataTableMulticolumn = new google.visualization.DataTable();
//define columns for first example
dataTable.addColumn('string','Scores');
dataTable.addColumn('number', 'Results');
//define columns for second example
dataTableMulticolumn.addColumn('string','Scores');
dataTableMulticolumn.addColumn('number', 'Results');
dataTableMulticolumn.addColumn('number', 'Results');
dataTableMulticolumn.addColumn('number', 'Results');
//define rows of data for first example
dataTable.addRows([['Junk', 10], ['Good', 10],['Bad', 10],['Dont care', 10],['OK', 10],['Super', 10]]);
//define rows of data for secondf example
dataTableMulticolumn.addRows([['Junk',0,0,0], ['Favor',10,10,10],['DontCare',375,350,235],['BigFans', 123,100,387]]);
//instantiate our chart objects
var chart = new google.visualization.ColumnChart (document.getElementById('Chart'));
var secondChart = new google.visualization.PieChart (document.getElementById('Chart2'));
//instantiate our multicolumn chart
var multiColumnChart = new google.visualization.ColumnChart (document.getElementById('Chart3'));
//instantiate a new chart to use as dataView Example
var pieChartWithView = new google.visualization.PieChart (document.getElementById('Chart4'));
//instantiate our Event example chart
var eventsChart = new google.visualization.ColumnChart (document.getElementById('Chart5'));
//create a view of the multicolumn data table
var view = new google.visualization.DataView(dataTableMulticolumn);
//filter it to get only first two columns
view.setColumns([0, 1]);
//define options for visualization
var options = {width: 400, height: 240, is3D: true, title: 'Statistical representation of scores by opinion '};
//draw our chart charts
chart.draw(dataTable, options);
secondChart.draw(dataTable, options);
multiColumnChart.draw(dataTableMulticolumn, options);
pieChartWithView.draw(view, options);
eventsChart.draw(dataTable, options);
//register callbacks
google.visualization.events.addListener(eventsChart, 'onmouseover', showDetails);
google.visualization.events.addListener(eventsChart, 'onmouseout', hideDetails);
}
function showDetails(e) {
switch (e['row']) {
case 0: document.getElementById('details0').style.visibility='visible';
break;
case 1: document.getElementById('details1').style.visibility='visible';
break;
case 2: document.getElementById('details2').style.visibility='visible';
break;
case 3: document.getElementById('details3').style.visibility='visible';
break;
}
}
function hideDetails(e) {
switch (e['row']) {
case 0: document.getElementById('details0').style.visibility='hidden';
break;
case 1: document.getElementById('details1').style.visibility='hidden';
break;
case 2: document.getElementById('details2').style.visibility='hidden';
break;
case 3: document.getElementById('details3').style.visibility='hidden';
break;
}
}
</script>
</head>
<body>
<div id="charts">
<div id="Chart2"></div>
</div>
</body>
</html>
//下面是调用compare_proc.php页面的Jquery代码，该页面包含我在上面复制的谷歌图表代码。
jQuery(document).ready(function() {
$("#opposition a").click(function(e) {
var first_id = $(this).attr('id');
var second_id = $("h1").attr('id');
$("#opposition img").mouseover(function() {
$(this).css('border-width','10px');
});
$("#opposition img").mouseout(function() {
$(this).css('border-width','2px');
});
$("div#test").load('compare_proc.php','id=' + first_id + '&id2=' + second_id);
e.preventDefault();
});
});