个人中心
gpt4 book ai didi

javascript - Google 图表不绘制/显示

转载 作者：行者123 更新时间：2023-12-03 09:07:19 25 4
gpt4 key购买 nike

我正在开发 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>

最佳答案

有 2 个问题:

  1. 结束</div>对于 #map_d丢失了

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

    $("#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']});
    });

关于javascript - Google 图表不绘制/显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32163195/

25 4 0
文章推荐： javascript - onclick 事件包含剩余空间
文章推荐： javascript - 在 ionic cordova 中使用 javascript 修改 PDF 以添加按钮
文章推荐： javascript - 限制特定大小的文件上传
文章推荐： javascript - 解析API请求计数和批处理: saveAll() destroyAll() etc
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com