Google 图表没有 Draw/Appear

Question

我正在开发 Parse.com 和 jQuery 单页应用程序。我希望能够绘制历史数据图表，但我没有绘制。

我不确定发生了什么。我很感激我能得到的任何帮助。

<html>
  <head>
    <title>Demo</title>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://www.parsecdn.com/js/parse-1.5.0.min.js"></script>    
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
        <script src="https://www.google.com/jsapi?autoload={
            'modules':[{
              'name':'visualization',
              'version':'1',
              'packages':['corechart']
            }]
          }"></script>
    <style>
    body { font-family: Helvetica, Arial, sans-serif; }

    h1 { font-size: 30px; margin: 0; }
    p { margin: 40px 0; }
    em { font-family: monospace; }
    a { color: #5298fc; text-decoration: none; }
    </style>
  </head>
  <body>
    <ul>
        <li><a href="#CurrentStatus">Current Status</a></li>
        <li><a href="#Map">Map</a></li>
        <li><a href="#Details">Details</a></li>
    </ul>

    <div id = "CurrentStatus" class = "page">
        <div class = "content">
            <h1>Current Status</h1>
        </div>
        <div> <b> Temperature: </b> </div>
        <div id="temp_div" style="width:25%; height:5%">
            <h5> Temperature </h5> </div>
    </div>

    <div id = "Map" class = "page">
        <div id="map_d" style="width:100%; height:70%">
        <div class = "content">
            <h1>Map</h1>
        </div>
    </div>

    <div id = "Details" class = "page">
        <div id="piechart" style="width:100%; height:70%"></div>
        <div class = "content">
            <h1>Details</h1>
        </div>
    </div>


    <script>
        Parse.initialize("key", "key");
        function showPage(pageId){
            $(".page").hide();
            $(pageId).show();
            $(pageId).trigger("show:query");
        }

        $(window).on("hashchange", function(event){
            showPage(location.hash);
            });

        $("#CurrentStatus").on("show:query", function(event){
            setInterval(init, 30000);           
            });
        $("#Map").on("show:query", function(event){
                setTimeout(map, 5);
        });
        $("#Details").on("show:query", function(event){
                console.log("precallback - details") //this appears on console
                google.setOnLoadCallback(drawChart);
        });

        location.hash = "";
        location.hash = "#CurrentStatus"

        function init() { 
                var Parent = Parse.Object.extend("Parent");
                var query = new Parse.Query(Parent);
                query.descending("updatedAt");
                query.first({
                    success: function(object) {
                        temp = document.createTextNode(object.get('Temp')),
                        dtemp = document.getElementById('temp_div');
                        dtemp.textContent = temp.data;
                        },
                    error: function(error) {
                        alert("Error: " + error.code + " " + error.message);
                        }
                    }); 
                }

        function map() { 
                var Parent = Parse.Object.extend("Parent");
                var query = new Parse.Query(Parent);
                query.descending("updatedAt");
                query.first({
                    success: function(object) {
                        var mapCanvas = document.getElementById('map_d');
                        var mapOptions = {
                            center: new google.maps.LatLng(object.get('Latitude'), (object.get('Longitude'))),
                            zoom: 15,
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                            }
                        var map = new google.maps.Map(mapCanvas, mapOptions);
                        var lati = Number(object.get('Latitude'));
                        var longi = Number(object.get('Longitude'));
                        var myLatLng = {lat:lati, lng:longi};
                        var marker = new google.maps.Marker({
                                                    position: myLatLng,
                                                    map: map,
                                                    title: 'Location!'
                                                    });
                        },
                    error: function(error) {
                        alert("Error: " + error.code + " " + error.message);
                        }
                    }); 
                }
        function drawChart() {
        console.log("draw"); //this is not showing on console
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
      }

    </script>
  </body>
</html>

Answer 1

有 2 个问题：

缺少 #map_d 的结尾 </div>

以下部分不会达到预期效果:

$("#Details").on("show:query", function(event){
        console.log("precallback - details") //this appears on console
        google.setOnLoadCallback(drawChart);
});

提供给 google.setOnLoadCallback 的回调将在所有库加载后立即执行一次。当你自动加载可视化库时，当你调用 setOnloadCallback 时，这已经发生了，drawChart 将永远不会被执行。

不同的方法：

不自动加载可视化，只加载 JSAPI：

<!--

<script src="https://www.google.com/jsapi?autoload={
        'modules':[{
          'name':'visualization',
          'version':'1',
          'packages':['corechart']
        }]
      }"></script>

-->
<script src="https://www.google.com/jsapi"></script>

要加载可视化库并绘制图表，请使用 $.one()

    /*
    $("#Details").on("show:query", function(event){
            console.log("precallback - details") //this appears on console
            google.setOnLoadCallback(drawChart);
    });
    */

    $("#Details").one("show:query", function(event){
        google.load("visualization", 
                    "1", 
                    { callback : drawChart,
                      packages : ['corechart']});
    });

Google 图表没有 Draw/Appear

Google Chart Does Not Draw/Appear

html

javascript

jquery

google-visualization

parse-platform