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