practice

　　　　

<html>
<meta charset="utf-8">

<style>
.バーティカル{writing-mode:vertical-rl;}
.エリア_1{display:flex;
align-items:flex-end;
border:solid 1px black;
border-radius:4px;
background-color:#ffffff;
width:280px;
height:260px;}
.バー_0{width:30px;
margin-top:20px;
margin-left:14px;
text-align:center;
padding-top:4px;
font-weight:bold;}
.グラフ_01{height:50px;
background-color:#aaffff;}
.グラフ_02{height:100px;
background-color:#ffddff;}
.グラフ_03{height:150px;
background-color:#aacfff;}
.グラフ_04{height:200px;
background-color:#ffddcc;}
.グラフ_05{height:250px;
background-color:#ccffcc;}
.グラフ_06{height:75px;
background-color:#ffbbbb;}
.エリア_2{display:flex;
align-items:flex-end;
font-weight:bold;
border:solid 1px black;
border-radius:4px;
background-color:#ffffff;
width:280px;
height:260px;}
.バー_2{width:28px;
transition:0.6s;
height:0;}
ul{margin-left:-30px;
margin-bottom:-4px;}
li{display:inline-block;
padding:5px;
text-align:center;
vertical-align:bottom;}
li:nth-child(1) .バー_2{background-color:#aaffff;}
li:nth-child(2) .バー_2{background-color:#ffddff;}
li:nth-child(3) .バー_2 {background-color:#aacfff;}
li:nth-child(4) .バー_2{background-color:#ffddcc;}
li:nth-child(5) .バー_2{background-color:#ccffcc;}
li:nth-child(6) .バー_2{background-color:#ffbbbb;}
</style>

<div class="エリア_1">
<div class="バー_0 グラフ_01">1<span class="バーティカル">月</span>20</div>
<div class="バー_0 グラフ_02">2<span class="バーティカル">月</span>40</div>
<div class="バー_0 グラフ_03">3<span class="バーティカル">月</span>60</div>
<div class="バー_0 グラフ_04">4<span class="バーティカル">月</span>80</div>
<div class="バー_0 グラフ_05">5<span class="バーティカル">月</span>100</div>
<div class="バー_0 グラフ_06">6<span class="バーティカル">月</span>30</div>
</div>
<hr>
<div class="エリア_2">
<ul>
<li>
<div id="ぐらふ_1"class="バー_2"></div>
<span>1月<br>20</span>
</li>
<li>
<div id="ぐらふ_2"class="バー_2"></div>
<span>2月<br>40</span>
</li>
<li>
<div id="ぐらふ_3"class="バー_2"></div>
<span>3月<br>60</span>
</li>
<li>
<div id="ぐらふ_4" class="バー_2"></div>
<span>4月<br>80</span>
</li>
<li>
<div id="ぐらふ_5"class="バー_2"></div>
<span>5月<br>100</span>
</li>
<li>
<div id="ぐらふ_6"class="バー_2"></div>
<span>6月<br>30</span>
</li>
</ul>
</div>

<script>
setInterval(function()
{その_1=document.getElementById("ぐらふ_1");
その_2=document.getElementById("ぐらふ_2");
その_3=document.getElementById("ぐらふ_3");
その_4=document.getElementById("ぐらふ_4");
その_5=document.getElementById("ぐらふ_5");
その_6=document.getElementById("ぐらふ_6");
num1=40;
num2=80;
num3=120;
num4=180;
num5=200;
num6=60;
その_1.style.height=num1+"px"; 
その_2.style.height=num2+"px";
その_3.style.height=num3+"px";
その_4.style.height=num4+"px"; 
その_5.style.height=num5+"px";
その_6.style.height=num6+"px";},50);
</script>

</html>