Lösungen ,

flexboxen-balkendiagram-highcharts.php

Quell Code

<!doctype html>
<html>
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
          <script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
        <title>Popup mit Javascript und grafik balken</title>
        <style>
body{
  margin:0;
  padding:0;
}


nav{
  position:fixed;
  width:100%;
  background:black;
  height:31px;
  text-align:center;
  color:white;
  text-align:center;
}
  #popup{
    display:none;
          width: 60vw; 
          min-height:100px;
          height:50vh; 
 position:absolute;
  left:20vw;
  top:25vh;
  z-index:3;
  background-color: #ffffff;
border:2px solid black;
}


.popheader {
      height: 34px; 
      background-color:green; 
 }


.content {
      padding: 10px; 
      overflow: auto;
}

.close {
   font-size: 30px; 
   float:right;
   height: 32px; 
   width: 34px; 
  text-align:center;
  color:white;
  border:1px solid black;
}
.close:hover{
  background:red;
  cursor:pointer;
}

 
 

#flexconti{
 padding-top:100px;
  display:flex;
  flex-direction:column;
}
.line{
    display: flex;
    flex:1;
    justify-content: space-around;
    align-content:flex-start;
}

.box{
  width:20vw;
  height:35vh;
  background:black;
  margin:10px;
  text-align:center;
  color:white;
  font-size:40px;
  line-height:2.2;
}
.line a{
  text-decoration:none;
}




@media screen and (max-width:1001px){
  .line{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}
  .box{
    width:40%;
  }
  .box3,.box6{
    width:90%;
  }
}
 
          
          
    @media screen and (min-width:1001px){
  .line{
    display: flex;
       flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}
  .box{
    width:20vw;
  }
}     
          
     
@media screen and (max-width:600px){
  .line{
  flex-direction:column;  
      display: flex;
    align-items: center;
}
  .box{
    width:90%;
  }
}
     
        </style>
    </head>
  <body>
      <nav>Navigation</nav>
      <div id="flexconti">
        <div class="line">
         <div data-wert="13,3,1,65,3,4,18,15" class="box">1</div>
          <div data-wert="1,2,3,14,5,6,7,18" class="box">2</div>
          <div data-wert="31,2,3,14,5,16,7,8" class="box box3">3</div>
        </div>
        <div class="line">
          <div data-wert="11,2,3,4,4,6,7,8" class="box">4</div>
          <div data-wert="1,22,3,4,5,6,7,8" class="box">5</div>
          <div data-wert="7,2,33,4,5,6,7,8" class="box box6">6</div>
          </div>
        </div>
 
      
        <div id="popup">
            <div class="popheader">
                <span class="close"> X</span>
            </div>
            <div class="content">
                 <div id="container"></div>
            </div>
        </div>
<script>
$('.close').click(function(){

  $('#popup').css('display','none');
})

$('.box').click(function(){

  $('#popup').css('display','block');
 g=$(this).data('wert');
 g.split(',').length-1;
  raus=g.split(',');
 
  a=parseInt(raus[0]);
b=parseInt(raus[1]);
c=parseInt(raus[2]);
d=parseInt(raus[3]);
e=parseInt(raus[4]);
f=parseInt(raus[5]);
g=parseInt(raus[6]);
h=parseInt(raus[7]);
  
 

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Besucherzahlen von  2018'
  },
  subtitle: {
    text: ' <a href="https://codepen.io/basti1012/pen/aPVQOJ?editors=1010">Meine Page</a> '
  },
  xAxis: {
    type: 'category',
    labels: {
      rotation: -45,
      style: {
        fontSize: '13px',
        fontFamily: 'Verdana, sans-serif'
      }
    }
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Besucherzahlen'
    }
  },
  legend: {
    enabled:false
  },
  tooltip: {
    pointFormat: 'Besucherzahlen Kw 12 in Jahr2018 <br><b>{point.y:.1f} Besucher</b>'
  },
  series: [{
    name: 'Population',
 data:[
 a,b,c,d,e,f,g,h,
   ],
    dataLabels: {
      enabled: true,
      rotation: -90,
      color: '#FFFFFF',
      align: 'right',
      format: '{point.y:.1f}', // one decimal
      y: 10, // 10 pixels down from the top
      style: {
        fontSize: '13px',
        fontFamily: 'Verdana, sans-serif'
      }
    }
  }]
});
  
  
  
})


</script>
    </body>
</html>