html5页面横向柱状图

关于横向柱状图，不使用各种插件的情况下，用CSS3+DIV+Javascript实现，效果图如下：

css相关样式：

/**滚动条样式**/
::-webkit-scrollbar {
 width: .6em;
}
::-webkit-scrollbar-track {
 
}
 ::-webkit-scrollbar-thumb {
 border:1px solid #419BF9;
 background-color: #0B6CAC;
 /* background-color: #F90; */
 background-image: -webkit-linear-gradient(45deg,  rgba(255, 255, 255, .4) 25%,  transparent 25%,  transparent 50%,  rgba(255, 255, 255, .4) 50%,  rgba(255, 255, 255, .4) 75%,  transparent 75%,  transparent); 
}
.left .cloumn{
	width:100%;
	min-height:70px;
	height:70px;
	color:#B4C6D5;
	/* border:1px solid #419BF9; */
	border-top:1px dashed #15A2D2;
	/* border-bottom:1px dashed #15A2D2; */
	padding-top:1%;
	padding-bottom:1%;
	/* border-bottom:none; */
}
.left .cloumn .label_left{
	width:25%;
	height:100%;
	display:-webkit-flex;
	align-items:center;
	justify-content:center;
	color:#B4C6D5;
	float:left;
	font-weight:900;
}
.left .cloumn .content{
	width:60%;
	height:100%;
	display:-webkit-flex;
	align-items:center;
	justify-content:flex-start;
	flex-flow: column;
	color:#B4C6D5;
	float:left;
}
.left .cloumn .content div{
	width:100%;
	height:50%;
	display:-webkit-flex;
	align-items:center;
	justify-content:flex-start;
	
}
.left .cloumn .label_right{
	width:15%;
	height:100%;
	display:-webkit-flex;
	align-items:center;
	justify-content:center;
	color:#B4C6D5;
	float:left;
}
.left .cloumn .label_right .value{
	display:-webkit-flex;
	align-items:center;
	justify-content:flex-start;
	height:100%;
	font-weight: bold;
	float:left;
}
.plan_font_cls{
	color:#14c872;
}
.real_font_cls{
	color:#F5A623;
}
.green{color:#7ED321}
.red{color:#F80322}
.orange{color:#DC640E}
.yellow{color:#F5A623}

html内容

    
名称
    

        

        

        进度节点1
        
        
    

    

    进度节点2
    
    


60%
30%
 

js循环填充数据

/**
*循环创建柱子，代码是for循环中的代码，数据根据自己业务改变
*
*/
function createLeftBar(i,data){
	var planWidth = createValue(data.planProcess,"%") == "--"?"0":createValue(data.planProcess,"%");//计划进度
	var realWidth = createValue(data.realProcess,"%") == "--"?"0":createValue(data.realProcess,"%");//实际进度
	var yqWidth = parseFloat(data.planProcess) - parseFloat(data.realProcess);//延期进度
	var realBorderRadius = "";//实际进度条 画圆角
	if(parseFloat(data.realProcess) > 0 && yqWidth > 0){
		realBorderRadius = "border-radius: 15px 0 0 15px;";
	}else if(parseFloat(data.realProcess) > 0 && yqWidth <= 0){
		realBorderRadius = "border-radius: 15px;";
	}
	var yqBorderRadius = "";//延期进度条 画圆角
	if(parseFloat(data.realProcess) <= 0 && yqWidth > 0){
		yqBorderRadius = "border-radius: 15px;";
	}else if(parseFloat(data.realProcess) > 0 && yqWidth > 0){
		yqBorderRadius = "border-radius:0 15px 15px 0;";
	}
	var $div = '
';
		$div += '
'+createValue(data.projectName,"")+'
';
		$div += '
';
		$div += '
';
		$div += '
';
		$div += ''+createValue(data.planNodeName,"")+'';
		$div += '
';
		$div += '
';
		$div += '
';
		$div += '
';
		$div += ''+createValue(data.realNodeName,"")+'';
		if(yqWidth > 0){
			$div += '';
		}
		$div += '
';
		$div += '
';
		$div += '
';
		$div += '
';
		$div += '
'+createValue(data.planProcess,"%")+'
';
		$div += '
'+createValue(data.realProcess,"%")+'
';
		$div += '
 ';
	$("#leftBar").append($div);	
}

以上代码可作为参考，如果调试不过来，可联系我（QQ:870488643）,希望能够帮得上忙。