Javascript 使用jQuery Mobile加载Google图表_Javascript_Ajax_Jquery Mobile_Google Visualization

Javascript 使用jQuery Mobile加载Google图表

javascript ajax jquery-mobile google-visualization

Javascript 使用jQuery Mobile加载Google图表,javascript,ajax,jquery-mobile,google-visualization,Javascript,Ajax,Jquery Mobile,Google Visualization,我正在开发一个jQuery移动应用程序，并试图实现Google图表。我无法使用当前方法显示图表。如果我把所有的代码都放在头上，它可以正常加载，但是当我把它传输到main.js文件时，它不会显示出来我使用的基本HTML页面： <!DOCTYPE html> <html> <head> <title>Manufacturing Dashboard</title> <meta name="viewport" conte

我正在开发一个jQuery移动应用程序，并试图实现Google图表。我无法使用当前方法显示图表。如果我把所有的代码都放在头上，它可以正常加载，但是当我把它传输到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>

我对JavaScript的AJAX操作和它在浏览器中的整体活动还不是很有经验，我仍在努力更好地掌握所有这些。提前感谢您对此问题的任何帮助

内森

我想出来了。由于我使用回调函数的方式是，它应该总是在我尝试使用图表时加载，因此我没有将回调函数设置为在加载API后立即启动，而是在需要时启动

drawChart（）

函数

改变

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
    //Code here...
}

到

// 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...
}