CSS 简单实现条形统计图

客户要求显示各类别条形统计图,使用框架或报表统计图工具过于复杂。下面是同事乐小琴同学实现的使用CSS 简单实现条形统计图。

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.datetable{ width:500px;}
.datetable label{ display:inline-block; width:150px; text-align:right; float:left;}
.datetable ul,.datetable li{ padding:0; margin:0; list-style:none;}
.datetable li{ line-height:30px;}
.datetable .first{ font-size:14px; margin-bottom:15px;}
.datetable ul li span{ border:1px solid #000; display:block; height:18px; float:left; margin-left:10px;}
.datetable ul li{ clear:both }
.color1{ background:#00c600; width:10%;}
.color2{ background:#9090ff; width:40%;}
.color3{ background:#ff90ff; width:20%;}
.color4{ background:#90c600; width:30%;}
.color5{ background:#ffc600; width:15%;}
.color6{ background:#2a90c6; width:30%;}

</style>
</head>

<body>
<div class="datetable">
<ul>
<li class="first"><label>&nbsp;</label>未使用原因分布结果</li>
<li><label>不会用</label><span class="color1"></span></li>
<li><label>没时间用</label><span class="color2"></span></li>
<li><label>没有必要用</label><span class="color3"></span></li>
<li><label>麻烦</label><span class="color4"></span></li>
<li><label>功能不合理</label><span class="color5"></span></li>
<li><label>其他</label><span class="color6"></span></li>
</ul>
</div>
</body>
</html>

显示结果如下:
CSS 简单实现条形统计图
 

你可能感兴趣的:(html,框架,XHTML,css)