Question

我正在尝试使用Google图表添加div元素并在其中绘制图表。但是在draw函数中，当我尝试使用document.getelementById（）访问div元素时，它给出null并且google函数抛出了“容器未定义”的错误。我哪里错了？

<!DOCTYPE html>
    <html lang="en">

    <head>


        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">


        <title>Test</title>

        <!-- Bootstrap Core CSS -->
        <link href="static/css/bootstrap.min.css" rel="stylesheet">

        <!-- Custom CSS -->

        <link href="static/css/bootstrap-multiselect.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">
        <script src="static/js/jquery.js"></script>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>

        <!-- Bootstrap Core JavaScript -->
        <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>BNG Subscriber Analytics</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 -->
            <div class="carousel-inner" id="imp">
                <div class="item active" id="c0">


                </div><!-- /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()

    {          
    for(i=0;i<4;i++)
    {
        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',
              is3D: true,
            };

        var output = document.getElementById("c0");
        var html = '<div class="col-sm-6"><div class="fff"><div class="thumbnail" id="i'+i+'"></div></div></div>';
        alert(html);
        output.innerHTML = html;
        var tmp = "i";
        var ele_id = tmp.concat(i+1);
        alert(ele_id);
        google.setOnLoadCallback(drawChart(ele_id,data,options)); 
    }

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

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

Answer 1

最初你设置了“i”0的值，即Id“i0”到div。

var html = '<div class="col-sm-6"><div class="fff"><div class="thumbnail" id="i'+i+'"></div></div></div>';

这里你增加了一个

var ele_id = tmp.concat(i+1);

使用Id“i1”

调用该函数

google.setOnLoadCallback(drawChart(ele_id,data,options));

所以document.getElementById(ele_id)返回undefined。

无需连接“i + 1”，仅连接“i”

var ele_id = tmp.concat(i);

Answer 2

您可以尝试使用jquery选择器指向div，在您的情况下使用$（'＃ele_id'）而不是document.getElementById（ele_id）

document.getElementById不适用于动态div

2 个答案: