我正在尝试使用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>