问题：自动加载覆盖层（Bootstrap）（Laravel 5.2）

Question

我正在使用laravel 5.2 中的 chart.js。当我打开页面时，所有的图表都被自动加载了（但不应该发生这种情况）。 另外，我没有使用window.load或window.onload函数。

它只应在点击（这里，点击图片）时打开

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>

EDIT: I think overlay is loaded automatically.

- YaSh Chaudhary

Answer 1

当浏览器遇到<script>代码块时，即使没有window.load函数，它也会运行<script>标签内部的内容。

您的浏览器正在执行此行：

setTimeout(chart1, 30)

一旦超时时间到期，它将运行您的chart1并构建图表。

删除该行，这将不再发生，无需用户交互。

- BeetleJuice

---

@YaShChaudhary，我在那个链接中没有看到任何图表。 - Dekel

@Dekel 前十个标题面板是带有十字标志（用于关闭）的图表......它们是预加载的（这就是问题）。 - YaSh Chaudhary

@Dekel 我已经让它们在一个覆盖层中打开了。 - YaSh Chaudhary

@Dekel，是的，它们已经加载好了（叠加部分）……试着通过点击 x（第一个）来关闭它……然后转到照片（位于消息下方），点击它……检查第一个图表（叠加）。 - YaSh Chaudhary

当我在Chrome中检查时，什么也没有发生。 - Dekel

Answer 2

除了Beetlejuice关于加载图表超时的正确提示外，看起来您正在跟随w3schools上的全屏覆盖教程，但只有部分内容：教程中的覆盖样式在您的示例代码（以及JSFiddle）中缺失。

实际上，“添加CSS”和“添加JavaScript”部分是隐藏覆盖并使其正常工作的部分。如果您想要隐藏覆盖，请建议您按照完整教程而不仅仅是顶部的小HTML片段进行操作。

这与Bootstrap或Laravel无关。

包含教程CSS复制粘贴的编辑后的JSFiddle：

/* The Overlay (background) */
.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */    
    height: 100%;
    width: 0;
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(0,0,0); /* Black fallback color */
    background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
    position: relative;
    top: 25%; /* 25% from the top */
    width: 100%; /* 100% width */
    text-align: center; /* Centered text/links */
    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block; /* Display block instead of inline */
    transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
    .overlay a {font-size: 20px}
    .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
    }
}

- Leith

---

是的，实际上我从错误的路径链接了CSS文件。 - YaSh Chaudhary

Answer 3

您可以将您直接编写的所有代码放入一个函数中，例如 show_charts()，然后将这个函数放在 <script> 标签中。

function show_charts()
{
  //All your code over here
}

然后，您可以将其与任何要单击以加载图表的元素关联到一个onclick函数，如下所示：

<img onclick="show_charts()" src="..." />

您可以通过在元素标签中添加onclick="show_charts()"来将其关联到任何元素。希望这能帮到您。

- Chintan Palan

---

你能提供一下 jsfiddle 的链接吗？ - YaSh Chaudhary

如果您正在使用Laravel，使用Blade模板引擎可以更改PHP代码的外观，如下所示。 - Chintan Palan

var data_viewer = {{ $viewer; }}; var data_viewer1 = {{ $viewer1; }}; - Chintan Palan

哪个部分出了问题？是onclick函数还是Laravel部分的blade变量？ - Chintan Palan

实际上，两者都已经在工作（如问题所述）......但是叠加层也会在窗口加载时加载。 - YaSh Chaudhary

请删除所有带有setTimeout语句的声明，而不是像我之前提到的那样创建新函数并将代码插入其中，请引用您已经创建的函数，即chart1()，chart2()，到它们各自元素的点击事件中。同时请记住，您的fiddle无法工作，因为您在其中编写了php代码，请删除php代码并硬编码变量的值以使其正常工作。 - Chintan Palan