使用jQuery Mobile加載Google圖表

Question

我正在開發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操作還沒有很豐富的經驗，並且它在瀏覽器中的總體活動還很豐富，但仍然試圖更好地掌握所有這些知識。 預先感謝您對這個問題的任何幫助！

彌敦道

Answer 1

我想到了。 不用設置一旦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...
}

使用jQuery Mobile加載Google圖表

問題描述

1 個解決方案

解決方案1
2 已采納 2013-07-16 12:00:32

使用jQuery Mobile加載Google圖表

問題描述

1 個解決方案

解決方案1 2 已采納 2013-07-16 12:00:32

解決方案1
2 已采納 2013-07-16 12:00:32