我正在使用laravel 5.2 中的 chart.js。当我打开页面时,所有的图表都被自动加载了(但不应该发生这种情况)。 另外,我没有使用window.load或window.onload函数。
EDIT:
I think overlay is loaded automatically.
它只应在点击(这里,点击图片)时打开
jsfiddle链接: https://jsfiddle.net/Lxdhhj7j/
<div class="container-fluid">
<div id="myNav1" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav1()">×</a>
<div class="overlay-content">
<script>
var year1 = ['FIRST','SECOND','THIRD', 'FOURTH' , 'FIFTH'];
var data_viewer = <?php echo $viewer; ?>;
var data_viewer1 = <?php echo $viewer1; ?>;
var data_viewer2 = <?php echo $viewer2; ?>;
var data_viewer3 = <?php echo $viewer3; ?>;
var data_viewer4 = <?php echo $viewer4; ?>;
var data_viewer5 = <?php echo $viewer5; ?>;
var data_click = <?php echo $click; ?>;
var data_click1 = <?php echo $click1; ?>;
var data_click2 = <?php echo $click2; ?>;
var data_click3 = <?php echo $click3; ?>;
var data_click4 = <?php echo $click4; ?>;
var data_click5 = <?php echo $click5; ?>;
var barChartData1 = {
labels: year1,
datasets: [{
label: 'STUDS',
backgroundColor: "rgba(65,105,225,0.5)",
data: data_click
}, {
label: 'ANGELS',
backgroundColor: "rgba(255,105,180,0.5)",
data: data_viewer
}],
};
function chart1(){
var ctx1 = document.getElementById("canvas1").getContext("2d");
var myBar1 = new Chart(ctx1, {
type: 'horizontalBar',
data: barChartData1,
options: {
elements: {
rectangle: {
borderWidth: 2,
borderColor: 'rgb(169, 169, 169)',
borderSkipped: 'bottom'
}
},
scales: {
xAxes: [{
ticks: {
min: 0,
beginAtZero: true
}
}]
},
responsive: true,
title: {
display: true,
text: 'RATING CHART'
}
}
});
};
</script>
<br>
<form action="done" method="get" accept-charset="utf-8">
<div class="container">
<div class="row">
<div class="col-md-7">
<div class="panel panel-default">
<div class="panel-heading">TOP 10</div>
<div class="panel-body">
<div class="row">
<section class="col-md-12">
<canvas id="canvas1" height="700" width="950" >
</canvas>
</section>
<section class="col-md-2">
</section>
</div>
</div>
</div>
</div>
<section class="col-md-offset-1 col-md-4">
<div class="row">
<div style="padding-top:10px; padding-bottom:10px; padding-left:50px;" class="jumbotron">
<section style="" class="col-md-12">
<h4 style="font-weight:bold; font-size:28px;">COLLEGE STUDS</h4>
</section>
<section class="col-md-offset-1">
<ul style="padding:0px; font-size:20px; color:black;">
<li>Rank 1 : <script> document.writeln(data_click1) </script></li>
<li>Rank 2 : <script> document.writeln(data_click2) </script></li>
<li>Rank 3 : <script> document.writeln(data_click3) </script></li>
<li>Rank 4 : <script> document.writeln(data_click4) </script></li>
<li>Rank 5 : <script> document.writeln(data_click5) </script></li>
</ul>
</section>
</div>
</div>
<div class="row">
<div style="padding-top:10px; padding-bottom:10px; padding-left:50px;" class="jumbotron">
<div class="row">
<section class="col-md-12">
<h4 style="font-weight:bold; font-size:28px;">COLLEGE ANGELS</h4>
</section>
<section class="col-md-offset-1">
<ul style="padding-left:0px; font-size:20px; color:black;">
<li>Rank 1 : <script> document.writeln(data_viewer1) </script></li>
<li>Rank 2 : <script> document.writeln(data_viewer2) </script></li>
<li>Rank 3 : <script> document.writeln(data_viewer3) </script></li>
<li>Rank 4 : <script> document.writeln(data_viewer4) </script></li>
<li>Rank 5 : <script> document.writeln(data_viewer5) </script></li>
</ul>
</section>
</div>
</div>
</div>
</section>
</div>
</div>
</form>
<!--graph goes here !--></div>
</div>
<div id="myNav2" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav2()">×</a>
<div class="overlay-content">
<script>
var year2 = ['FIRST','SECOND','THIRD', 'FOURTH' , 'FIFTH'];
var secondfemale = <?php echo $secondfemale; ?>;
var secondfemale1 = <?php echo $secondfemale1; ?>;
var secondfemale2 = <?php echo $secondfemale2; ?>;
var secondfemale3= <?php echo $secondfemale3; ?>;
var secondfemale4 = <?php echo $secondfemale4; ?>;
var secondfemale5 = <?php echo $secondfemale5; ?>;
var secondmale = <?php echo $secondmale; ?>;
var secondmale1 = <?php echo $secondmale1; ?>;
var secondmale2 = <?php echo $secondmale2; ?>;
var secondmale3 = <?php echo $secondmale3; ?>;
var secondmale4 = <?php echo $secondmale4; ?>;
var secondmale5 = <?php echo $secondmale5; ?>;
var barChartData2 = {
labels: year2,
datasets: [{
label: 'STUDS',
backgroundColor: "rgba(65,105,225,0.5)",
data: secondmale
}, {
label: 'ANGELS',
backgroundColor: "rgba(255,105,180,0.5)",
data: secondfemale
}],
};
function chart2(){
var ctx2 = document.getElementById("canvas2").getContext("2d");
var myBar2 = new Chart(ctx2, {
type: 'horizontalBar',
data: barChartData2,
options: {
elements: {
rectangle: {
borderWidth: 2,
borderColor: 'rgb(169, 169, 169)',
borderSkipped: 'bottom'
}
},
scales: {
xAxes: [{
ticks: {
min: 0,
beginAtZero: true
}
}]
},
responsive: true,
title: {
display: true,
text: 'RATING CHART'
}
}
});
};
setTimeout(chart2, 30)
</script>
<br>
<form action="done" method="get" accept-charset="utf-8">
<div class="container">
<div class="row">
<div class="col-md-7">
<div class="panel panel-default">
<div class="panel-heading">TOP 10</div>
<div class="panel-body">
<div class="row">
<section class="col-md-12">
<canvas id="canvas2" height="700" width="950" >
</canvas>
</section>
<section class="col-md-2">
</section>
</div>
</div>
</div>
</div>
<section class="col-md-offset-1 col-md-4">
<div class="row">
<div style="padding-top:10px; padding-bottom:10px; padding-left:50px;" class="jumbotron">
<section style="" class="col-md-12">
<h4 style="font-weight:bold; font-size:28px;">COLLEGE STUDS</h4>
</section>
<section class="col-md-offset-1">
<ul style="padding:0px; font-size:20px; color:black;">
<li>Rank 1 : <script> document.writeln(secondmale1) </script></li>
<li>Rank 2 : <script> document.writeln(secondmale2) </script></li>
<li>Rank 3 : <script> document.writeln(secondmale3) </script></li>
<li>Rank 4 : <script> document.writeln(secondmale4) </script></li>
<li>Rank 5 : <script> document.writeln(secondmale5) </script></li>
</ul>
</section>
</div>
</div>
<div class="row">
<div style="padding-top:10px; padding-bottom:10px; padding-left:50px;" class="jumbotron">
<div class="row">
<section class="col-md-12">
<h4 style="font-weight:bold; font-size:28px;">COLLEGE ANGELS</h4>
</section>
<section class="col-md-offset-1">
<ul style="padding-left:0px; font-size:20px; color:black;">
<li>Rank 1 : <script> document.writeln(secondfemale1) </script></li>
<li>Rank 2 : <script> document.writeln(secondfemale2) </script></li>
<li>Rank 3 : <script> document.writeln(secondfemale3) </script></li>
<li>Rank 4 : <script> document.writeln(secondfemale4) </script></li>
<li>Rank 5 : <script> document.writeln(secondfemale5) </script></li>
</ul>
</section>
</div>
</div>
</div>
</section>
</div>
</div>
</form>
<!--graph goes here !--></div>
</div>
<div id="myNav3" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav3()">×</a>
<div class="overlay-content">
<script>
var year3 = ['FIRST','SECOND','THIRD', 'FOURTH' , 'FIFTH'];
var thirdfemale = <?php echo $thirdfemale; ?>;
var thirdfemale1 = <?php echo $thirdfemale1; ?>;
var thirdfemale2 = <?php echo $thirdfemale2; ?>;
var thirdfemale3 = <?php echo $thirdfemale3; ?>;
var thirdfemale4 = <?php echo $thirdfemale4; ?>;
var thirdfemale5 = <?php echo $thirdfemale5; ?>;
var thirdmale = <?php echo $thirdmale; ?>;
var thirdmale1 = <?php echo $thirdmale1; ?>;
var thirdmale2 = <?php echo $thirdmale2; ?>;
var thirdmale3 = <?php echo $thirdmale3; ?>;
var thirdmale4 = <?php echo $thirdmale4; ?>;
var thirdmale5 = <?php echo $thirdmale5; ?>;
var barChartData3 = {
labels: year3,
datasets: [{
label: 'STUDS',
backgroundColor: "rgba(65,105,225,0.5)",
data: thirdmale
}, {
label: 'ANGELS',
backgroundColor: "rgba(255,105,180,0.5)",
data: thirdfemale
}],
};
function chart3() {
var ctx3 = document.getElementById("canvas3").getContext("2d");
var myBar3 = new Chart(ctx3, {
type: 'horizontalBar',
data: barChartData3,
options: {
elements: {
rectangle: {
borderWidth: 2,
borderColor: 'rgb(169, 169, 169)',
borderSkipped: 'bottom'
}
},
scales: {
xAxes: [{
ticks: {
min: 0,
beginAtZero: true
}
}]
},
responsive: true,
title: {
display: true,
text: 'RATING CHART'
}
}
});
};
setTimeout(chart3, 30);
</script>
<br>
<form action="done" method="get" accept-charset="utf-8">
<div class="container">
<div class="row">
<div class="col-md-7">
<div class="panel panel-default">
<div class="panel-heading">TOP 10</div>
<div class="panel-body">
<div class="row">
<section class="col-md-12">
<canvas id="canvas3" height="700" width="950" >
</canvas>
</section>
<section class="col-md-2">
</section>
</div>
</div>
</div>
</div>
<section class="col-md-offset-1 col-md-4">
<div class="row">
<div style="padding-top:10px; padding-bottom:10px; padding-left:50px;" class="jumbotron">
<section style="" class="col-md-12">
<h4 style="font-weight:bold; font-size:28px;">COLLEGE STUDS</h4>
</section>
<section class="col-md-offset-1">
<ul style="padding:0px; font-size:20px; color:black;">
<li>Rank 1 : <script> document.writeln(thirdmale1) </script></li>
<li>Rank 2 : <script> document.writeln(thirdmale2) </script></li>
<li>Rank 3 : <script> document.writeln(thirdmale3) </script></li>
<li>Rank 4 : <script> document.writeln(thirdmale4) </script></li>
<li>Rank 5 : <script> document.writeln(thirdmale5) </script></li>
</ul>
</section>
</div>
</div>
<div class="row">
<div style="padding-top:10px; padding-bottom:10px; padding-left:50px;" class="jumbotron">
<div class="row">
<section class="col-md-12">
<h4 style="font-weight:bold; font-size:28px;">COLLEGE ANGELS</h4>
</section>
<section class="col-md-offset-1">
<ul style="padding-left:0px; font-size:20px; color:black;">
<li>Rank 1 : <script> document.writeln(thirdfemale1) </script></li>
<li>Rank 2 : <script> document.writeln(thirdfemale2) </script></li>
<li>Rank 3 : <script> document.writeln(thirdfemale3) </script></li>
<li>Rank 4 : <script> document.writeln(thirdfemale4) </script></li>
<li>Rank 5 : <script> document.writeln(thirdfemale5) </script></li>
</ul>
</section>
</div>
</div>
</div>
</section>
</div>
</div>
</form>
<!--graph goes here !--></div>
</div>
<div id="myNav4" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav4()">×</a>
<div class="overlay-content">
<script>
var year4 = ['FIRST','SECOND','THIRD', 'FOURTH' , 'FIFTH'];
var fourthfemale = <?php echo $fourthfemale; ?>;
var fourthfemale1 = <?php echo $fourthfemale1; ?>;
var fourthfemale2 = <?php echo $fourthfemale2; ?>;
var fourthfemale3 = <?php echo $fourthfemale3; ?>;
var fourthfemale4 = <?php echo $fourthfemale4; ?>;
var fourthfemale5 = <?php echo $fourthfemale5; ?>;
var fourthmale = <?php echo $fourthmale; ?>;
var fourthmale1 = <?php echo $fourthmale1; ?>;
var fourthmale2 = <?php echo $fourthmale2; ?>;
var fourthmale3 = <?php echo $fourthmale3; ?>;
var fourthmale4 = <?php echo $fourthmale4; ?>;
var fourthmale5 = <?php echo $fourthmale5; ?>;
var barChartData4 = {
labels: year4,
datasets: [{
label: 'STUDS',
backgroundColor: "rgba(65,105,225,0.5)",
data: fourthmale
}, {
label: 'ANGELS',
backgroundColor: "rgba(255,105,180,0.5)",
data: fourthfemale
}],
};
function chart4() {
var ctx4 = document.getElementById("canvas4").getContext("2d");
window.myBar4 = new Chart(ctx4, {
type: 'horizontalBar',
data: barChartData4,
options: {
elements: {
rectangle: {
borderWidth: 2,
borderColor: 'rgb(169, 169, 169)',
borderSkipped: 'bottom'
}
},
scales: {
xAxes: [{
ticks: {
min: 0,
beginAtZero: true
}
}]
},
responsive: true,
title: {
display: true,
text: 'RATING CHART'
}
}
});
};
// var nav4=document.getElementById("myNav4")
// nav4.onclick = function(){
setTimeout(chart4, 30)
//}
</script>
<br>
<form action="done" method="get" accept-charset="utf-8">
<div class="container">
<div class="row">
<div class="col-md-7">
<div class="panel panel-default">
<div class="panel-heading">TOP 10</div>
<div class="panel-body">
<div class="row">
<section class="col-md-12">
<canvas id="canvas4" height="700" width="950" >
</canvas>
</section>
<section class="col-md-2">
</section>
</div>
</div>
</div>
</div>
<section class="col-md-offset-1 col-md-4">
<div class="row">
<div style="padding-top:10px; padding-bottom:10px; padding-left:50px;" class="jumbotron">
<section style="" class="col-md-12">
<h4 style="font-weight:bold; font-size:28px;">COLLEGE STUDS</h4>
</section>
<section class="col-md-offset-1">
<ul style="padding:0px; font-size:20px; color:black;">
<li>Rank 1 : <script> document.writeln(fourthmale1) </script></li>
<li>Rank 2 : <script> document.writeln(fourthmale2) </script></li>
<li>Rank 3 : <script> document.writeln(fourthmale3) </script></li>
<li>Rank 4 : <script> document.writeln(fourthmale4) </script></li>
<li>Rank 5 : <script> document.writeln(fourthmale5) </script></li>
</ul>
</section>
</div>
</div>
<div class="row">
<div style="padding-top:10px; padding-bottom:10px; padding-left:50px;" class="jumbotron">
<div class="row">
<section class="col-md-12">
<h4 style="font-weight:bold; font-size:28px;">COLLEGE ANGELS</h4>
</section>
<section class="col-md-offset-1">
<ul style="padding-left:0px; font-size:20px; color:black;">
<li>Rank 1 : <script> document.writeln(fourthfemale1) </script></li>
<li>Rank 2 : <script> document.writeln(fourthfemale2) </script></li>
<li>Rank 3 : <script> document.writeln(fourthfemale3) </script></li>
<li>Rank 4 : <script> document.writeln(fourthfemale4) </script></li>
<li>Rank 5 : <script> document.writeln(fourthfemale5) </script></li>
</ul>
</section>
</div>
</div>
</div>
</section>
</div>
</div>
</form>
<!--graph goes here !--></div>
</div>
<!-- Brand and toggle get grouped for better mobile display -->
<nav id="in" class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<!-- /.navbar-collapse -->
<div class="row">
<section id="aks" class="col-md-1">
AksOut~
</section>
<section class="col-lg-6 col-sm-12 col-xs-12 col-md-6 col-lg-offset-1 col-md-offset-3"><span id="know"><u>Know your collegemates better...</u></span></section>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1"><span class="sr-only">Toggle navigation</span>Menu<span class="glphicon glyphicon-chevron down"></span></button>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="defaultNavbar1">
<ul class="nav navbar-nav">
<li id="menu"><a href="crush.html">MyPlace</a></li>
<li id="menu"><a href="#">Interact</a></li>
<li id="menu"><a href="#">Happenings</a></li>
<li id="menu"><a href="#">News</a></li>
<li id="menu"><a href="#">reports</a></li>
<li id="menu"><a href="#">ThinkTank</a></li>
<li id="menu"><a href="#">TalentPool</a></li>
</ul>
<form class="navbar-form navbar-left" role="search">
<!--search bar-->
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<br><div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-1"></div>
<div class="col-lg-3"></div>
<div class="col-lg-3"></div>
<section class="col-lg-1" id="svg"></section>
<section class="col-lg-3"><label id="label1">score</label></section>
<section class="col-lg-2"><input type="text"></section>
</div></br>
</div>
<div class="row">
<div class="col-lg-3"></div>
<div class="col-lg-1 col-lg-offset-5">
<button type="button" class="btn btn-sm btn-default" id="messages" >Friends</button>
</div>
<div class="col-lg-1">
<div class="btn-group">
<button type="button" id="messages" class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Chat<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li role="presentation" class="dropdown-header">Dropdown header 1</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">First Link</a></li>
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled Link</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated Link</a></li>
</ul>
</div>
</div>
<div class="col-lg-1">
<div class="btn-group">
<button id="messages" type="button" class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Messages<span class="caret" ></span></button>
<ul class="dropdown-menu" role="menu">
<li role="presentation" class="dropdown-header">Dropdown header 1</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">First Link</a></li>
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled Link</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated Link</a></li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6"></div>
<div class="col-lg-6"></div>
</div>
<div class="row">
<div class="col-md-3 col-lg-3"> <span id="span1" style="font-size:30px;cursor:pointer;" onclick="openNav1()">
<br><div><img id="img1" src="pic/1 (1).jpg" width="250" height="250" class="img-circle img-responsive" alt=""/> </div></br>
</span> </div>
<div class="col-md-3 col-lg-offset-2"> <span id="span2" style="font-size:30px;cursor:pointer;" onclick="openNav2()">
<br><div><img id="img2" src="pic/1 (44).jpg" width="250" height="250" class="img-circle img-responsive" alt=""/> </div></br>
</span> </div>
</div>
<div class="row">
<div class="col-md-3 col-lg-offset-1"> <span id="span3" style="font-size:30px;cursor:pointer;" onclick="openNav3()">
<br><div><img id="img3" src="pic/1 (45).jpg" width="250" height="250" class="img-circle img-responsive" alt=""/> </div></br>
</span> </div>
<div class="col-md-3 col-lg-offset-2"> <span id="span4" style="font-size:30px;cursor:pointer;" onclick="openNav4()">
<br><div><img id="img4" src="pic/1 (46).jpg" width="250" height="250" class="img-circle img-responsive" alt=""/> </div></br>
</span> </div>
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading" id="panel">
<h3 class="panel-title" id="have" >Groups</h3>
</div>
<div class="panel-body" id="grpfoot">
<div class="col-md-4"><img src="images/ImgResponsive_Placeholder.png" class="img-circle img-responsive" alt="Placeholder image"></div>
<div class="col-md-4 col-lg-8">
<input type="text" name="textfield" id="textfield">
</div>
<div></div>
</div>
<div id="see" class="panel-footer">
<button type="button" class="btn btn-sm btn-default">SeeMore>></button>
<div class="pull-right">
<button type="button" class="btn btn-sm btn-default">Create </button>
</div>
</div>
</div>
</div>
<div class="col-lg-6"></div>
</div>
<script>
function openNav1() {
document.getElementById("myNav1").style.width = "100%";
chart1();
}
function closeNav1() {
document.getElementById("myNav1").style.width = "0%";
}
</script>
<script>
function openNav2() {
document.getElementById("myNav2").style.width = "100%";
chart2();
}
function closeNav2() {
document.getElementById("myNav2").style.width = "0%";
}
</script>
<script>
function openNav3() {
document.getElementById("myNav3").style.width = "100%";
chart3();
}
function closeNav3() {
document.getElementById("myNav3").style.width = "0%";
}
</script>
<script>
function openNav4() {
document.getElementById("myNav4").style.width = "100%";
chart4();
}
function closeNav4() {
document.getElementById("myNav4").style.width = "0%";
}
</script>