我正在开发 jQuery Mobile 应用程序并尝试实现 Google Charts。我无法使用当前方法显示图表。如果我将所有代码放在头部，它会加载正常，但是当我将它传输到我的 main.js 文件时，它不会显示。
我正在使用的基本 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 操作及其在浏览器中的整体事件不是很有经验，仍在努力更好地掌握所有这些。提前感谢您对此问题的任何帮助!
内森
最佳答案
我想通了。由于我使用它的方式，它应该始终在我尝试使用图表时加载，而不是设置在 API 加载后触发的回调，我只是触发 drawChart() 在需要时运行。
改变
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
//Code here...
}
到
*Main Function* {
drawChart();
}
function drawChart() {
//Code here...
}
关于javascript - 使用 jQuery Mobile 加载 Google Charts，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17661842/