0
我已经创建了一个PHP文件，该文件向我显示一些计算出的值以及使用Google Chart显示此数据的可视化。如果我只是直接打开这个PHP，一切正常。使用jQuery加载包含Google Chart的PHP文件：Chart永远不会显示！
因此，我的下一步是使用jQuery单击按钮时将此PHP（包括谷歌图表）加载到另一个页面中。我遇到的问题是，计算的值显示没有问题，但图表没有。使用Firebug我发现在PHP文件（这是图表可视化所需的）内部加载谷歌的API时必定会有问题。我已经做了各种尝试，在调用PHP文件的页面（甚至使用jquerys getscript）内加载API，但没有成功。
有没有人知道我在这里错过了什么，或者我该如何让这个图表显示出来？
非常感谢您的帮助！
这里是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代码必须在源代码中的-tag定义之后。
这里来的两个简单的文件试图加载图表（我想这应该很容易重现我的错误）：
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>
我很抱歉，但在这一点上，我不知道如何读出您发送给我的链接或我的文件中要更改的内容。如果你运行这两个文件，你会看到加载过程崩溃和怪异的，因为它是该网页正试图联系谷歌...
可能是一个问题，谷歌图表本身显然是使用相同的技术来覆盖一个div标签为了显示图表？
事情是我将代码分成两部分作为目的。我想加载gchart_test.htm INTO gchart.htm，因为在我的项目中，gchart.htm仅仅是一个更大的网站的示例，我希望将google图表引入其中。在gchart.htm中，只有6行代码可以让其他人看到我想要弄明白的内容。所以代码只是一个简化，所以每个人都可以重现我得到的错误。
请发布您的代码。 – Damien 2011-06-08 13:52:58
我已合并您的未注册帐户，并将以前的答案转换为对此问题的编辑。您现在应该可以编辑您的问题，并在收到的答案下留下评论。 – 2011-06-08 14:07:17
现在我已经完成了相同的操作（合并帐户，将答案转换为对问题的编辑）。 – Dori 2011-06-09 08:29:09