我已经创建了一个PHP文件，该文件显示了一些计算值，并使用Google Chart可视化了这些数据。如果我直接打开这个PHP，一切都很好。
因此，我的下一步是在使用jQuery单击按钮时，将这个PHP（包括谷歌图表）加载到另一个页面中。我遇到的问题是，计算出的值显示出来没有问题，但图表没有。使用Firebug，我发现google的API加载肯定有问题，这发生在PHP-文件中（这是图表可视化所需的）。我已经尝试过在调用PHP-文件的页面中加载API（甚至使用jquerys getscript），但没有成功。
有人知道我在这里错过了什么吗？或者我如何才能让这个图表出现？
非常感谢你的帮助！
以下是PHP文件（没有PHP部分）：
<html>
<head>
<title>Analyseergebnis</title>
<!--Load the AJAX API-->
<!-- +++++++++++++++++++ Definition von Google Charts +++++++++++++++++++++ -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</head>
<body>
<div style='width:300px; text-align:center; background-color:lightgrey; padding-top:5px; padding-bottom:5px;'><b>A N A L Y S E E R G E B N I S</b></div>
<p />
<!-- +++++++++++++++++++ HERES THE PHP PART - NOT SHOWN HERE +++++++++++++++++++++ -->
.....................
<!-- +++++++++++++++++++ Aufruf des Diagramms +++++++++++++++++++++ -->
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create our data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Wiesen', <?php echo str_replace(',', '.', $row_wiesen[0]); ?>], // Konversion da Google Charts als ',' nur '.' akzeptiert
['Acker', <?php echo str_replace(',', '.', $row_acker[0]); ?>],
['versiegelt', <?php echo str_replace(',', '.', $row_versieg[0]); ?>],
['Laubwald', <?php echo str_replace(',', '.', $row_lwald[0]); ?>],
['Nadelwald', <?php echo str_replace(',', '.', $row_nwald[0]); ?>],
['Wasser', <?php echo str_replace(',', '.', $row_wasser[0]); ?>],
['Unklassifiziert', <?php echo str_replace(',', '.', $row_na[0]); ?>]
]);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('gchart'));
chart.draw(data, {width: 300, height: 200, colors:['#006400','#CD853F','#C0C0C0','#228B22','#556B2F','#1E90FF','#000000'], legend: 'right', chartArea:{width:"90%", height:"85%"}, pieSliceText:"none"});
}
</script>
<div id="gchart"></div>
</body>
</html>
这里是我调用PHP文件的地方：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#map {
width: 800px;
height: 475px;
border: 1px solid grey;
}
</style>
<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=en-us"></script>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
++++++++++ HERE COMES THE OPENLAYERSPART - NOT SHOWN HERE +++++++++++
</head>
<body onload="initmap()">
<table>
<tr>
<td>
<div id="map"></div>
</td>
<td valign="top">
<div id="div1" style="display:visible;">
<button id="ajaxloadlink" type="submit">A N A L Y S E starten</button>
</div>
<div id="ajaxcontent" style="font-family:Verdana; font-size:9pt">
- Bitte zuerst Suchpolygone erfassen! -
</div>
<div id="div2" style="display:none; text-align:right;">
<input type="button" id="ajaxbacklink" value="NEUE Analyse starten" onclick="clearLayerVector()">
</div>
</td>
</tr>
</table>
<script type="text/javascript">
$.ajaxSetup ({
cache: false // Browser soll den AJAX-Befehl nicht cachen, da PHP-file mehrmals hintereinander abgerufen wird
});
$.toggle = function(query)
{
$(query).toggle("fast");
}
$("#ajaxloadlink").click(function(){
$.toggle('#div1');
$("#ajaxcontent").empty().html('<div style="width:300px; text-align:center;"><p><img src="../web/loader.gif" /></p></div>');
$("#ajaxcontent").load("../web/abfrage.php");
$.toggle('#div2');
});
$("#ajaxbacklink").click(function(){
//document.getElementById('ajaxcontent').style.display = "none";
$("#ajaxcontent").empty().html('<div id="ajaxcontent">- Bitte zuerst Suchpolygone erfassen! -</div>');
$.toggle('#div2');
$.toggle('#div1');
});
</script>
</body>
</html>
非常感谢你的帮助！
谢谢你的建议。唯一的问题是，我不是一个jQuery程序员，我真的不确定你链接的帖子是什么。我用一个非常简化的版本运行了更多的测试，只在点击按钮时显示谷歌图表（代码如下所示），但没有成功。似乎仍然无法识别JScript代码。我唯一注意到的是，具有函数的jquery代码必须在源代码中的-标记定义之后。
下面是两个试图加载图表的简单文件（我想应该很容易重现我得到的错误）：
gchart.htm-这是jQuery将调用的文件-如果你只运行这个文件，你会看到图表显示没有问题：
<html>
<head>
<title>Testwiese</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="gchart.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create our data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Wiesen', 2],
['Acker', 3],
['versiegelt', 6],
['versiegelt', 6]
]);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('gchart'));
chart.draw(data, {width: 300, height: 200, colors:['#006400','#CD853F','#C0C0C0','#228B22','#556B2F','#1E90FF','#000000'], legend: 'right', chartArea:{width:"90%", height:"85%"}, backgroundColor: 'white', pieSliceText:"none"});
}
</script>
</head>
<body>
<div id="gchart"></div>
</body>
</html>
和gchart_test.htm-带有调用上面文件的按钮的文件：
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</head>
<body>
<input type="button" id="gshow" value="Test Gchart">
<div id="gchart"></div>
<script type="text/javascript">
// load() functions
var loadUrl = "gchart.htm";
$("#gshow").click(function(){
$("#gchart").load(loadUrl);
});
</script>
</body>
</html>
很抱歉，但在这一点上，我不知道从你发给我的链接中读什么，也不知道在我的文件中更改什么。如果你运行这两个文件，你会看到加载过程崩溃和奇怪，因为页面正试图联系谷歌。。。
Google图表本身显然使用了相同的技术来覆盖div标记以显示图表，这可能是个问题吗？
问题是，我将代码分为两部分，以达到目的。我想把gchart_test.htm加载到gchart.htm中，因为在我的项目中，gchart.htm只是一个更大的网站的例子，我想把谷歌图表导入其中。在gchart.htm中，只有6行代码，以便让其他人尽可能简单地看到我想要写的内容。所以代码只是一个简化，这样每个人都可以重现我得到的错误。
看看这个jquery load（）剥离脚本标记-解决方法？。我认为你的问题是一样的。
本应创建图表的脚本没有执行，因为它已被jQuery.load（）.删除
gchart.html:
<html>
<head>
<title>Testwiese</title>
</head>
<body>
<div id="gchart"></div>
</body>
</html>
gchart_test.html:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="gchart.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
</script>
</head>
<body>
<input type="button" id="gshow" value="Test Gchart">
<div id="gchart"></div>
<script type="text/javascript">
// load() functions
var loadUrl = "gchart.htm";
$("#gshow").click(function(){
$("#gchart").load(loadUrl, function(){
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Wiesen', 2],
['Acker', 3],
['versiegelt', 6],
['versiegelt', 6]
]);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('gchart'));
chart.draw(data, {width: 300, height: 200, colors:['#006400','#CD853F','#C0C0C0','#228B22','#556B2F','#1E90FF','#000000'], legend: 'right', chartArea:{width:"90%", height:"85%"}, backgroundColor: 'white', pieSliceText:"none"});
});
});
</script>
</body>
</html>
我认为你应该把这些文件合并起来。没有理由将大约6行html分开。