<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>17.15jQuery案例十三图表</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
var bardata1 = new Array(9,18,50);
$('#bar li .one').each(function(index, element) {
var pre = bardata1[index]/100*300;
/*$(this).height(pre);*/
$(this).animate({'height':pre},1000);
$(this).children().html( bardata1[index]);
});
//
var bardata2 = new Array(88,66,50);
$('#bar li .two').each(function(index, element) {
var pre = bardata2[index]/100*300;
/*$(this).height(pre);*/
$(this).animate({'height':pre},1000);
$(this).children().html( bardata2[index]);
});
//
var bardata3 = new Array(77,33,35);
$('#bar li .three').each(function(index, element) {
var pre = bardata3[index]/100*300;
/*$(this).height(pre);*/
$(this).animate({'height':pre},1000);
$(this).children().html( bardata3[index]);
});//
});
</script>
<style>
*{
margin:0;
padding:0;
}
li{ list-style-type:none;}
#chart{
width:400px;
height:300px;
background-color:#FCC;
margin:50px auto;
}
#numList{
width:30px;
height:300px;
float:left;
}
#numList li{
width:30px;
height:30px;
position:relative;
}
#numList li span{
width:30px;
height:14px;
line-height:14px;
font-size:14px;
text-align:right;
border-bottom:1px dotted #333333;
position:absolute;
bottom:0px;
}
#bar li{
float:left;
width:100px;
height:300px;
margin:0 10px;
position:relative;
}
#bar li span{
display:block;
width:30px;
height:20px;
line-height:20px;
font-size:14px;
text-align:center;
position:absolute;
bottom:-20px;
}
#bar li div{
width:30px;
height:0px;
/*background-color:#03F;*/
position:absolute;
bottom:0;
float:left;
}
#bar li div.one{
left:0;
background-color:#00F;}
#bar li div.two{
left:40px;
background-color:#0FF;
}
#bar li div.three{
left:80px;
background-color:#FF0;
}
#bar li div p{
width:30px;
height:20px;
color:red;
font-size:14px;
position:absolute;
text-align:center;
display:none;
}
#bar li div:hover p{ display:block;}
</style>
</head>
<body>
<div id="chart">
<ul id="numList">
<li><span>90</span></li>
<li><span>80</span></li>
<li><span>70</span></li>
<li><span>60</span></li>
<li><span>50</span></li>
<li><span>40</span></li>
<li><span>30</span></li>
<li><span>20</span></li>
<li><span>10</span></li>
<li><span>0</span></li>
</ul>
<ul id="bar">
<li>
<div class="one"><p></p></div>
<div class="two"><p></p></div>
<div class="three"><p></p></div>
<span>A</span>
</li>
<li>
<div class="one"><p></p></div>
<div class="two"><p></p></div>
<div class="three"><p></p></div>
<span>B</span>
</li>
<li>
<div class="one"><p></p></div>
<div class="two"><p></p></div>
<div class="three"><p></p></div>
<span>C</span>
</li>
</ul>
</div>
</body>
</html>
