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内容

<div class="cloumn" style="">
    <div class="label_left">名称</div>
    <div class="content" id="bar0">
        <div style="width:100%;">
        <div class="progress">
        <span style="width: 60%;border-radius:15px;" class="green"><span style="color:#E6F5FA;">进度节点1</span></span>
        </div>
        </div>
    <div style="width:100%;">
    <div class="progress">
    <span style="z-index:1;width: 30%" class="orange" ><span style="color:#E6F5FA;">进度节点2</span></span><span style="width: 30%" class="red"></span>
    </div>
    </div>
</div>
<div class="label_right" style="flex-flow: column;">
<div class="value plan_font_cls">60%</div>
<div class="value real_font_cls">30%</div>
</div> 

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 class="cloumn" style="">';
		$div += '<div class="label_left">'+createValue(data.projectName,"")+'</div>';
		$div += '<div class="content" id="bar0">';
		$div += '<div style="width:100%;">';
		$div += '<div class="progress">';
		$div += '<span style="width: '+planWidth+';border-radius:15px;" class="green" data-tooltip="'+createValue(data.planNodeName,"")+'"><span style="color:#E6F5FA;">'+createValue(data.planNodeName,"")+'</span></span>';
		$div += '</div>';
		$div += '</div>';
		$div += '<div style="width:100%;">';
		$div += '<div class="progress">';
		$div += '<span style="z-index:1;width: '+realWidth+';'+realBorderRadius+'" class="orange" data-tooltip="'+createValue(data.realNodeName,"")+'"><span style="color:#E6F5FA;">'+createValue(data.realNodeName,"")+'</span></span>';
		if(yqWidth > 0){
			$div += '<span style="width: '+yqWidth+'%;'+yqBorderRadius+'" class="red"></span>';
		}
		$div += '</div>';
		$div += '</div>';
		$div += '</div>';
		$div += '<div class="label_right" style="flex-flow: column;">';
		$div += '<div class="value plan_font_cls">'+createValue(data.planProcess,"%")+'</div>';
		$div += '<div class="value real_font_cls">'+createValue(data.realProcess,"%")+'</div>';
		$div += '</div> ';
	$("#leftBar").append($div);	
}

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