简单的柱状图

Html

Css

Js

		

4.5
			
5.0
			
4.7
		

数据转换
			
服务态度
			
结算效率
		

.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; }

function showLevel(li) { for (var i = 0; i < li.length; i++) { var back = $(li[i]).attr("bak-color"); $(li[i]).css({ 'background': back }); var level = $(li[i]).attr("level"); level = level * 20; level = 100 - level; $(li[i]).animate({ top: level }, 500); } } //初始化图形 showLevel($(".zhpj-li"));

↑上面代码改变，会自动显示代码结果

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>