Html
    Css
    Js

    
                        
.zhpj {
	width:250px;
	height:150px;
	margin:0 auto;
	position:relative;
	top:50%;
	margin-top:55px;
}
.zhpj-ul {
	list-style-type:none;
	padding:0px;
	margin:0px;
	height:120px;
	overflow:hidden;
	border-bottom:1px solid #ccc;
	width:180px;
}
.zhpj-li {
	width:20px;
	height:100px;
	float:left;
	margin:20px;
	position:relative;
	top:100px;
}
.zhpj-li p {
	position:relative;
	bottom:25px;
	font-size:12px;
	text-align:center;
}
.zhpj-title {
	float:left;
	font-size:12px;
	margin:0px 6px;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

简单的柱状图

例:

<li class="zhpj-li" level="4.5" bak-color="#fea500"><p>4.5</p></li>
<li class="zhpj-li" level="传入值" bak-color="传入color"><p>显示的值</p></li>

目前是满分5分 可以改动js代码实现其他分数


0