谷歌图表API给出“null”错误

时间:2015-10-19 05:13:24

标签: javascript jquery html twitter-bootstrap google-api

我正在尝试使用google API在bootstrap滑块上绘制饼图。前四个图表非常好。但接下来的四个图表正在给出

  

错误:“无法读取属性长度为null”。

我搜索了很多东西来解决这个问题但是没有成功。我可以知道问题是什么吗?

代码

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

        <div class="page-header">
            <h3>Test</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">
                <div class="item active">

                            <div class="col-sm-6">
                                <div class="fff">
                                    <div class="thumbnail" id="i1">

                                    </div>

                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="fff">
                                    <div class="thumbnail" id="i2">

                                    </div>

                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="fff">
                                    <div class="thumbnail" id="i3">

                                    </div>

                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="fff">
                                    <div class="thumbnail" id="i4">

                                    </div>

                                </div>
                            </div>

                  </div><!-- /Slide1 --> 
                  <!-- Slide2 -->
                  <div class="item">

                            <div class="col-sm-6">
                                <div class="fff">
                                    <div class="thumbnail" id="i5">

                                    </div>

                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="fff">
                                    <div class="thumbnail" id="i6">

                                    </div>

                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="fff">
                                    <div class="thumbnail" id="i7">

                                    </div>

                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="fff">
                                    <div class="thumbnail" id="i8">

                                    </div>

                                </div>
                            </div>

                  </div><!-- /Slide2 --> 

            </div><!-- /Carousel inner -->




        </div><!-- /#myCarousel -->

    </div><!-- /.col-xs-12 -->          

    </div><!-- /.container -->


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

    function onLoading()

    {          

    for(i=0;i<8;i++)
    {
    google.setOnLoadCallback(drawChart(i));
    }
    }
    function drawChart(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 tmp = "i";
        var ele_id = tmp.concat(i+1);
        alert(ele_id);
        var chart = new google.visualization.PieChart(document.getElementById(ele_id));
        chart.draw(data, options);

    }     
    </script>
    </body>

0 个答案:

没有答案