使用谷歌API抛出“长度为空”错误的饼图

时间:2015-10-18 16:08:46

标签: 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 个答案:

没有答案