1
我正在研究jQuery Mobile應用程序並嘗試實施Google圖表。我無法使用我目前的方法顯示圖表。如果我把所有的代碼放在頭部，它會加載正常，但是當我將它傳送到我的main.js文件時，它不會顯示出來。使用jQuery Mobile加載谷歌圖表
基本的HTML頁面，我使用：
<!DOCTYPE html>
<html>
<head>
<title>Manufacturing Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./css/grey-orange.min.css" />
<link rel="stylesheet" href="./css/jquery.mobile.custom.structure.min" />
<link rel="stylesheet" href="./fonts/font-awesome/css/font-awesome.min.css"/>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.mobile.custom.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["piechart", "corechart", "geomap"]});
</script>
</head>
<body>
<div data-role="page" data-theme="a" id="main-project-page">
<div data-role="panel" class="project-menu" data-position="left" data-theme="c">
</div><!-- /panel -->
<div data-role="header" data-position="fixed">
</div><!-- /header -->
<div data-role="content">
<h3 id="project-name"></h3>
<div id="project-overall-chart"></div>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
</div><!-- /footer -->
</div><!-- /page -->
<script src="./js/main.js"></script>
</body>
</html>
我調用API給我一些信息有關從數據庫項目，並利用這些信息創建我的圖表。不過，我現在只是使用Google API文檔中的示例作爲佔位符，以確保我理解它。這是我正在試圖把它...
//Global thingz
var request;
var project_id = "null";
var equipment_id = "null";
//Main Project Page
$(document).on("pageinit", "#main-project-page", function() {
//Menu Panel slide effect
$('.menu-button').click(function(event) {
$('.project-menu').panel("open");
});
//Populate project page with current project...
populate_project_view();
});
function populate_project_view()
{
//If there is a project to get
if (project_id != 'null')
{
//Construct the JSON
var json = new Object();
var info = new Object();
json.type = "info";
info.type = "project";
info.id = project_id;
json.info = info;
json = JSON.stringify(json);
//Make-a the request-a
request = getHTTPObject();
request.onreadystatechange = function() {
//If request object received response
if (request.readyState == 4)
{
var json = JSON.parse(request.responseText);
if (json.error == true)
{
alert('Error: ' + json.msg);
//Revert back to main screen
$.mobile.changePage('#main-page', 'slide', true, true);
}
else
{
//Populate the #main-project-page DOM with project object
var project = json.project;
//Populate Project's name
var name = document.createTextNode(project.name);
$('#project-name').append(name);
// 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([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('project-overall-chart'));
chart.draw(data, options);
}
}
}
}
request.open("GET", "./php/api.php?package=" + json + '&qs=' + new Date().getTime(), true);
request.send(null);
}
}
/*
Support functions
*/
//Returns an HTTPObject
function getHTTPObject()
{
var xhr = false;
if (window.XMLHttpRequest)
{
xhr = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
try
{
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
xhr = false;
}
}
}
return xhr;
}
我不是很有經驗的JavaScript的AJAX操作和它在瀏覽器的整體活動呢，還是試圖讓所有的一個更好的把握。預先感謝任何有關此問題的幫助！
Nathan