javascript|html5页面横向柱状图 javascript|css

关于横向柱状图，不使用各种插件的情况下，用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}

【javascript|html5页面横向柱状图】html内容

名称进度节点1进度节点260% 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）,希望能够帮得上忙。