个人中心
gpt4 book ai didi

javascript - "cannot read property length of null"- 谷歌

转载 作者：太空狗 更新时间：2023-10-29 16:35:25 24 4
gpt4 key购买 nike

我正在使用 Flask 编写一个简单的应用程序。我正在使用 Google API 绘制图表。第一页显示正确。

Correct output

但在接下来的页面中，我收到“无法读取 null 的属性长度”错误。

Error

我的代码如下:

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="refresh" content="100; URL=http://127.0.0.1:5000/">
    <title>Test</title>
    <!-- Bootstrap Core CSS -->
    <link href="static/css/bootstrap.min.css" rel="stylesheet">
    <link href="static/css/bootstrap-multiselect.css" rel="stylesheet">
    <link href="static/css/new.css" rel="stylesheet">
    <!-- Custom Fonts -->
    <link href="static/lib/css/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
    <!-- JavaScript -->
    <script src="static/js/jquery.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script src="static/js/bootstrap.min.js"></script>
    <script src="static/js/bootstrap-multiselect.js"></script>
    <script src="static/js/Chart.js-master/Chart.js"></script>
  </head>

  <body onload = onLoading()>
    <div class="container">
      <div class="col-xs-12">

        <div class="page-header">
          <h3><b>Test</b></h3>
        </div>

        <div class="carousel slide" id="myCarousel">
          <nav>
            <ul class="control-box pager">
              <li><a data-slide="prev" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-left"></i></a></li>
              <li><a data-slide="next" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-right"></i></li>
            </ul>
          </nav>
          <!-- /.control-box -->
          <!-- Slide1 -->
          <div class="carousel-inner" id="imp">
            <!-- /Slide1 -->
          </div><!-- /Carousel inner -->
        </div><!-- /#myCarousel -->
      </div><!-- /.col-xs-12 -->
    </div><!-- /.container -->

    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      // Carousel Auto-Cycle
      $(document).ready(function() {
        $('.carousel').carousel({
          interval: 3000
        })
      });

      function onLoading() {
        //alert("Inside");      
        $.get("/load",function(calldata,status) {
          //console.log(calldata);
          //alert(calldata.length);
          var num_nodes = calldata.length;
          var loop = 0;

          for (i=0;i<num_nodes;i++) {
            if (i%4==0) {
              if (i==0) {
                var divoutput = document.getElementById("imp");
                var divhtml = '<div class="item active" id="c'+(i/4)+'"></div>';
                divoutput.innerHTML = divoutput.innerHTML+divhtml;
                alert(i);
                console.log(divoutput.innerHTML);
              } else {
                var divoutput = document.getElementById("imp");
                var divhtml = '<div class="item" id="c'+(i/4)+'"></div>';
                divoutput.innerHTML = divoutput.innerHTML+divhtml;
                loop = i/4;
                alert(loop);
                console.log(divoutput.innerHTML);
              }
            }
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Errors');
            data.addColumn('number', 'Statistics');
            data.addRows([
              ['Success',     calldata[i].errors.success],
              ['Authorization Failure', calldata[i].errors.auth_failure],
              ['Feature Failure',  calldata[i].errors.feature_failure],
              ['FSOL Failure', calldata[i].errors.fsol_failure]
            ]);

            var options = {
              title: calldata[i].node_name,
              is3D: true,
              backgroundColor:'#ECECEA',
            };

            var output = document.getElementById("c"+loop);
            //alert("***"+document.getElementById("c"+loop));
            var html = '<div class="col-sm-6"><div class="fff"><div class="thumbnail" id="i'+i+'"></div></div></div>';
            //alert(html);
            output.innerHTML = output.innerHTML + html;
            var tmp = "i";
            var ele_id = tmp.concat(i);
            //alert(ele_id);
            if (calldata[i].errors.success < calldata[i].errors.auth_failure) {
              document.getElementById("i"+i).style.backgroundColor = "red";
            }
            google.setOnLoadCallback(drawChart(ele_id,data,options));
          }
        });
      }

      function drawChart(ele_id,data,options)
      {
        google.load("visualization", "1", {packages:["corechart"]});
        //alert(ele_id);  
        //alert("draw"+document.getElementById(ele_id));
        var chart = new google.visualization.PieChart(document.getElementById(ele_id));
        chart.draw(data, options);
      }
    </script>
  </body>
</html>

最佳答案

我使用 bootstrap 选项卡并想在隐藏选项卡上显示图表，但我遇到了与您相同的错误

当我在事件表格上显示图形时，它显示得很完美。

所以我猜有些东西链接到 DOM 和隐藏元素，与您的数据无关

关于javascript - "cannot read property length of null"- 谷歌，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33229260/

24 4 0
文章推荐： android - 使用 recyclerview Material 设计样式化抽屉导航
文章推荐： Android:任务 ":app:dexDebug"执行失败
文章推荐： c - 在 Xcode 中添加链接器标志
文章推荐： 由于插件错误，Android 构建失败
太空狗
个人简介

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

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