我正在与荒谬的问题作斗争。我决定在我的项目中包含谷歌图表，但它不起作用。
acutally 它单独工作，但它不适用于我在 Firefox 上的其他 jquery 代码。
它适用于谷歌浏览器，没有问题。但是当我删除<script src="http://code.jquery.com/jquery-latest.js"></script>这一行时，它会起作用。
在问这个问题之前，我读了这个，但我无法解决它：
Google Charts API 使用 $(document).ready 方法显示空白屏幕
google.setOnLoadCallback 和 jQuery $(document).ready()，可以混用吗？
我的完整代码：适用于 chrome，不适用于 firefox（如果我不包含 jquery.js 则有效）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>
<link type="text/css" href="datepicker/ui.all.css" rel="stylesheet" />
<link type="text/css" href="datepicker/demos.css" rel="stylesheet" />
<link rel="shortcut icon" href="stok.ico" />
<link href="Site.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="themes/base/jquery.ui.all.css">
<link rel="stylesheet" href="uploadify/uploadify.css" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/jquery.uploadify.js"></script>
<script src="ui/jquery.ui.core.js"></script>
<script src="ui/jquery.ui.widget.js"></script>
<script src="ui/jquery.ui.tabs.js"></script>
<script src="ui/jquery.ui.mouse.js"></script>
<script src="ui/jquery.ui.draggable.js"></script>
<script src="ui/jquery.ui.position.js"></script>
<script src="ui/jquery.ui.resizable.js"></script>
<script src="ui/jquery.ui.dialog.js"></script>
<script src="ui/jquery.ui.datepicker.js"></script>
<script src="ui/jquery.ui.datepicker-tr.js"></script>
<link rel="stylesheet" href="css/jq.css" type="text/css" media="print, projection, screen" />
<link rel="stylesheet" href="themes/blue/style.css" type="text/css" media="print, projection, screen" />
<link rel="stylesheet" href="blueimp/bootstrap.min.css">
<link rel="stylesheet" href="blueimp/bootstrap-image-gallery.min.css">
<script type="text/javascript" src="js/jquery.tablesorter.js"></script>
<script type="text/javascript" src="js/docs.js"></script>
<script src="js/jquery.form.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#tablesorter-demo").tablesorter({widgets: ['zebra']});
});
</script>
<link rel="stylesheet" href="demos.css">
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'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 the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
<?php
include "db-class.php";
include "func-class.php";
$db= new db;
$data=new data;
$db->connect();
$strSQL = "SELECT temsilci_bolge, count( id ) as sayi FROM garanti WHERE durum=1 GROUP BY temsilci_bolge";
$sonuc2 = mysql_query ( $strSQL );
while ( $satir = mysql_fetch_array( $sonuc2 ) )
{
?>
['<?php echo $satir["temsilci_bolge"];?>', <?php echo $satir["sayi"]; ?>],
<?php
}
?>
]);
// Set chart options
var options = {'title':'Bölgelere Göre Arıza İstatistiği',
'width':600,
'height':500};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="dialog-confirm" title="Kaydı Silmek İstiyor musunuz ?" style="display:none;">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Silme İşlemi Kalıcı Olarak Yapılacaktır. Emin misiniz?</p>
</div>
<div id="edit-confirm" title="Kaydı Değiştirmek İstiyor musunuz ?" style="display:none;">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Gerçekten Düzenlemek İstiyor musunuz?</p>
</div>
<div class="page">
<div class="header">
<div class="title" style="float:right">
<h1> xyz Group </h1>
</div>
<h1><font size="+6"> AAAS</font> <font style="margin-top:5px !important; position:relative;">®</font> </h1>
<h1>Aaaaaa aaaaaa aaaaaa ssssssss</h1>
<br />
</div>
<div class="main">
<div id="return"></div>
<div class="demo">
<div id="dialog" title="Sonuç">
<p></p>
</div>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Kayıt Ekleme</a></li>
<li><a href="#tabs-silme">Kayıt Silme</a></li>
<li><a href="#tabs-sonuc">Sonuçlar</a></li>
<li><a href="#tabs-detay">Detaylı Arama</a></li>
<li><a href="#tabs-ozel">Özel Kayıt Arama</a></li>
<li><a href="#tabs-stat">Google Chart Stats</a></li>
</ul>
<div id="tabs-1">
</div>
<div id="tabs-sonuc">
</div>
<div id="tabs-detay">
<div class="detay">Detay</div>
</div>
<div id="tabs-ozel">
<div class="ozel_sonuc">!!!!</div>
</div>
<div id="tabs-stat">
<div id="chart_div" style="float:left;"></div>
google charts
</div>
</div>
</div><!-- End demo -->
<div class="demo-description">
<p><img src="logo.jpg" width="100" height="92"/>
</div><!-- End demo-description -->
</div>
<div class="clear">
</div>
</div>
<div class="footer">
AaaS</font><font style="margin-top:-15px;">®</font> Copyright © 2012 </p>
</div>
</body>
</html>