html怎么做条形统计图,CSS 简单实现条形统计图

客户要求显示各类别条形统计图，使用框架或报表统计图工具过于复杂。下面是同事乐小琴同学实现的使用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%;}

•  未使用原因分布结果
• 不会用
• 没时间用
• 没有必要用
• 麻烦
• 功能不合理
• 其他

显示结果如下：