<?php
/********************************
* 时间 : 2007-10-23 16:10
* 作者 : Bevin
* E-mail : zgzjcxh0#163.com
* Website: kanshen.me
********************************/
$array[] = array('date'=>'01','pv'=>'3000','ip'=>'300');
$array[] = array('date'=>'02','pv'=>'2000','ip'=>'1200');
$array[] = array('date'=>'03','pv'=>'5240','ip'=>'1700');
$array[] = array('date'=>'04','pv'=>'6000','ip'=>'300');
$array[] = array('date'=>'05','pv'=>'5000','ip'=>'1300');
$array[] = array('date'=>'06','pv'=>'5000','ip'=>'2200');
$array[] = array('date'=>'07','pv'=>'5000','ip'=>'1300');
$array[] = array('date'=>'08','pv'=>'5000','ip'=>'300');
$array[] = array('date'=>'09','pv'=>'5000','ip'=>'2100');
$array[] = array('date'=>'11','pv'=>'4001','ip'=>'300');
$array[] = array('date'=>'12','pv'=>'5500','ip'=>'2230');
$array[] = array('date'=>'13','pv'=>'2801','ip'=>'300');
$array[] = array('date'=>'14','pv'=>'5221','ip'=>'1300');
$array[] = array('date'=>'15','pv'=>'4001','ip'=>'300');
$array[] = array('date'=>'16','pv'=>'6101','ip'=>'300');
$array[] = array('date'=>'17','pv'=>'2221','ip'=>'300');
$array[] = array('date'=>'18','pv'=>'3301','ip'=>'600');
$count_ip = 0;
$count_pv = 0;
$max_pv = 0;
foreach($array as $value) {
$count_ip += $value['ip'];
$count_pv += $value['pv'];
if($max_pv<$value['pv']) {
$max_pv = $value['pv'];
}
}
$max_pv_per = ceil($max_pv/4);
$max_pv = $max_pv_per*4;
foreach($array as $key=>$value) {
$array[$key]['pvs'] = floor($value['pv']/$max_pv*108);
$array[$key]['ips'] = floor($value['ip']/$max_pv*108);
}
$content_width = count($array)*20;
$t_right_widht = $content_width-50;
if($content_width<400){
$content_width = 400;
}
?>
<html>
<title>Php+div+css仿51.la做的柱形图</title>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<style>
div.content {border:0px solid red; height:150px; font-size:12px;}
div.top{height:120px;}
div.top .t_left{height:120px; width:40px; border:0px solid #666; float:left;}
div.top .t_left div{text-align:right; padding-bottom:10px}
div.top .t_right{height:120px; float:left; clear:right;}
div.top .t_right .image{height:108px; border:1px solid #666; width:100%; background-image:url("http://www.ilaopo.net/images/bg.jpg")}
div.top .t_right .date{height:12px; width:100%;}
div.top .t_right .image div{background-image:url("http://www.ilaopo.net/images/q.jpg"); width:10px; margin:0px 3px; float:left; height:0px;}
div.top .t_right .image div img{width:10px; border:0px;}
div.top .t_right .date div{width:16px; text-align:right; float:left; height:12px; }
div.bottom{height:30px; text-align:center; line-height:30px;padding-left:50px;}
div.bottom div{height:20px;float:left;}
div.bottom div img {width:10px; border:1px solid #666; margin:7px 5px 0px 10px;}
</style>
</head>
<body>
<div class="content" style="width:<?php echo $content_width; ?>px;">
<div class="top">
<div class="t_left">
<?php for($i=4;$i>=0;$i--) {
?>
<div><?php echo ($i*$max_pv_per); ?></div>
<?php }?>
</div>
<div class="t_right" style="width:<?php echo $t_right_widht; ?>px">
<div class="image">
<?php
foreach($array as $value){
?>
<div style="height:<?php echo $value['pvs']; ?>px;margin-top:<?php echo (108-$value['pvs']); ?>px"><img src="http://www.ilaopo.net/images/s.jpg" style="height:<?php echo $value['ips']; ?>px;margin-top:<?php echo ($value['pvs']-$value['ips']); ?>px;"></div>
<?php }?>
</div>
<div class="date">
<?php
foreach($array as $value){
?>
<div><?php echo $value['date'];?></div>
<?php }?>
</div>
</div>
</div>
<div class="bottom"><div><img src=">访问量 <?php echo $count_ip;?> IP</div><div><img src=">浏览量 <?php echo $count_pv;?> PV</div></div>
</div>
</body>
</html>
