1. дома
  2. Вопрос и ответ
  3. Почему представление диаграммы не имеет симметрии?

Почему представление диаграммы не имеет симметрии?

2017-02-13 3 views
3

Я действительно смущен, почему моя диаграмма выглядит так. Сверху вниз диаграмма перемещается влево, затем график усекается. почему это так? что я должен делать, чтобы диаграмма была симметричной и не усекалась?Почему представление диаграммы не имеет симметрии?

Вот мой bargraph.html

<!DOCTYPE html> 
<html lang="en"> 

<head> 

    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 

    <title>Portfolio Item - Start Bootstrap Template</title> 

    <!-- Bootstrap Core CSS --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 


    <!-- Custom CSS --> 
    <link href="css/portfolio-item.css" rel="stylesheet"> 

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
    <![endif]--> 

</head> 

<body> 

    <!-- Navigation --> 
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
     <div class="container"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="#">Sekolah Pascasarjana IPB - Pasca Dalam Angka</a> 
      </div> 
      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav navbar-right"> 
        <li> 
         <a href="#">Beranda</a> 
        </li> 
        <li> 
         <a href="#">Tentang</a> 
        </li> 
        <li> 
         <a href="#">Kontak</a> 
        </li> 
        <li> 
         <a href="#">Login</a> 
        </li> 
       </ul> 
      </div> 
      <!-- /.navbar-collapse --> 
     </div> 
     <!-- /.container --> 
    </nav> 


     <div class="row"> 
       <div class="col-md-6 col-sm-6 col-xs-12"> 
       <div class="x_panel"> 
        <div class="x_title"> 
        <h2><center>Jenis Kelamin</center></h2> 
        <ul class="nav navbar-right panel_toolbox"> 
         <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a> 
         </li> 
         <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a> 
         <ul class="dropdown-menu" role="menu"> 
          <li><a href="#">Settings 1</a> 
          </li> 
          <li><a href="#">Settings 2</a> 
          </li> 
         </ul> 
         </li> 
         <li><a class="close-link"><i class="fa fa-close"></i></a> 
         </li> 
        </ul> 
        <div class="clearfix"></div> 
        </div> 
        <div class="x_content"> 

        <!--lineChart--> 
        <canvas id="mycanvas"></canvas> 
        </div> 
       </div> 
       </div> 

     <div class="col-md-6 col-sm-6 col-xs-12"> 
       <div class="x_panel"> 
        <div class="x_title"> 
        <h2><center>Fakultas</center></h2> 
        <ul class="nav navbar-right panel_toolbox"> 
         <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a> 
         </li> 
         <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a> 
         <ul class="dropdown-menu" role="menu"> 
          <li><a href="#">Settings 1</a> 
          </li> 
          <li><a href="#">Settings 2</a> 
          </li> 
         </ul> 
         </li> 
         <li><a class="close-link"><i class="fa fa-close"></i></a> 
         </li> 
        </ul> 
        <div class="clearfix"></div> 
        </div> 
        <div class="x_content"> 
        <!--mybarChart--> 
        <canvas id="mycanvas2"></canvas> 
        </div> 
       </div> 
       </div> 
      </div> 
      <div class="clearfix"></div> 
      <div class="row"> 
      <div class="col-md-6 col-sm-6 col-xs-12"> 
       <div class="x_panel"> 
        <div class="x_title"> 
        <h2><center>Jumlah Pelamar Magister Berdasarkan IPK S1</center></h2> 
        <ul class="nav navbar-right panel_toolbox"> 
         <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a> 
         </li> 
         <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a> 
         <ul class="dropdown-menu" role="menu"> 
          <li><a href="#">Settings 1</a> 
          </li> 
          <li><a href="#">Settings 2</a> 
          </li> 
         </ul> 
         </li> 
         <li><a class="close-link"><i class="fa fa-close"></i></a> 
         </li> 
        </ul> 
        <div class="clearfix"></div> 
        </div> 
        <div class="x_content"> 
        <!--canvasRadar--> 
        <canvas id="mycanvas3"></canvas> 
        </div> 
       </div> 
       </div> 

      <div class="row"> 
       <div class="col-md-6 col-sm-6 col-xs-12"> 
       <div class="x_panel"> 
        <div class="x_title"> 
        <h2><center>Jumlah Pelamar Berdasarkan Status PT</center></h2> 
        <ul class="nav navbar-right panel_toolbox"> 
         <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a> 
         </li> 
         <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a> 
         <ul class="dropdown-menu" role="menu"> 
          <li><a href="#">Settings 1</a> 
          </li> 
          <li><a href="#">Settings 2</a> 
          </li> 
         </ul> 
         </li> 
         <li><a class="close-link"><i class="fa fa-close"></i></a> 
         </li> 
        </ul> 
        <div class="clearfix"></div> 
        </div> 
        <div class="x_content"> 
        <!--pieChart--> 
        <canvas id="mycanvas4"></canvas> 
        </div> 
       </div> 
       </div> 

       <div class="clearfix"></div> 
      <div class="row"> 

      <div class="col-md-6 col-sm-6 col-xs-12"> 
       <div class="x_panel"> 
        <div class="x_title"> 
        <h2><center>Jumlah Pelamar Berdasarkan Usia</center></h2> 
        <ul class="nav navbar-right panel_toolbox"> 
         <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a> 
         </li> 
         <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a> 
         <ul class="dropdown-menu" role="menu"> 
          <li><a href="#">Settings 1</a> 
          </li> 
          <li><a href="#">Settings 2</a> 
          </li> 
         </ul> 
         </li> 
         <li><a class="close-link"><i class="fa fa-close"></i></a> 
         </li> 
        </ul> 
        <div class="clearfix"></div> 
        </div> 
        <div class="x_content"> 
        <!--canvasRadar--> 
        <canvas id="mycanvas5"></canvas> 
        </div> 
       </div> 
       </div> 


       <div class="row"> 
       <div class="col-md-6 col-sm-6 col-xs-12"> 
       <div class="x_panel"> 
        <div class="x_title"> 
        <h2><center>Jumlah Pelamar Magister Berd Instansi</center></h2> 
        <ul class="nav navbar-right panel_toolbox"> 
         <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a> 
         </li> 
         <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a> 
         <ul class="dropdown-menu" role="menu"> 
          <li><a href="#">Settings 1</a> 
          </li> 
          <li><a href="#">Settings 2</a> 
          </li> 
         </ul> 
         </li> 
         <li><a class="close-link"><i class="fa fa-close"></i></a> 
         </li> 
        </ul> 
        <div class="clearfix"></div> 
        </div> 
        <div class="x_content"> 
        <!--pieChart--> 
        <canvas id="mycanvas6"></canvas> 
        </div> 
       </div> 
       </div> 

       <div class="clearfix"></div> 
      <div class="row"> 

      <div class="col-md-6 col-sm-6 col-xs-12"> 
       <div class="x_panel"> 
        <div class="x_title"> 
        <h2><center>Jumlah Pelamar Program Magister Per Tahun</center></h2> 
        <ul class="nav navbar-right panel_toolbox"> 
         <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a> 
         </li> 
         <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a> 
         <ul class="dropdown-menu" role="menu"> 
          <li><a href="#">Settings 1</a> 
          </li> 
          <li><a href="#">Settings 2</a> 
          </li> 
         </ul> 
         </li> 
         <li><a class="close-link"><i class="fa fa-close"></i></a> 
         </li> 
        </ul> 
        <div class="clearfix"></div> 
        </div> 
        <div class="x_content"> 
        <!--canvasRadar--> 
        <canvas id="mycanvas7"></canvas> 
        </div> 
       </div> 
       </div> 






    <!-- javascript --> 
    <script type="text/javascript" src="js/jquery.min.js"></script> 
    <script type="text/javascript" src="js/Chart.min.js"></script> 
    <script type="text/javascript" src="js/app.js"></script> 
    </body> 
</html>

что я должен сделать так, чтобы график не может быть усечен? большое спасибо так много

Вот картина графа enter image description here]

источник

2017-02-13 ntr_dw

ответ

1

я нашел ответ. Я пропустил синтаксис «контейнер». так вот ответ

<div class="container> 
<div class="row"> 
       <div class="col-md-6 col-sm-6 col-xs-12"> 
       <div class="x_panel"> 
        <div class="x_title"> 
        <h2><center>Jenis Kelamin</center></h2>

источник

2017-02-14 07:49:11

Смежные вопросы

 Смежные вопросы