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>