在工作中遇到了写条形图的情况，因为文字，条形数量和条形图的颜色需要改变，所以不能用图片，所以决定写一个试试，写的比较简单，但毕竟是第一次，也遇到了一些问题，特意记录下来，以免忘记。
因为该页面还需要兼容ie8，处理每个条形的间距也是一个问题。所以使用justify-content: space-around;来让每个条形两端对齐，但是并不兼容ie8，于是通过js来计算每个条形之间的margin值来控制条形能达到两端对齐的效果。
还有一个问题是：文字无法上下居中，于是把文字单独写到一个span标签中，通过js来控制span的位置。
具体代码如下：
1 <div class="chart"> 2 <div class="bar-div"> 3 <span class="bar"> 4 <span class="bar-percent" style="height:86%"><span class="num-percent">86%</span><span class="percent-subject">药学综合知识</span></span> 5 </span> 6 <span class="bar"> 7 <span class="bar-percent" style="height:99%"><span class="num-percent">99%</span><span class="percent-subject">药学一</span></span> 8 </span> 9 <span class="bar"> 10 <span class="bar-percent" style="height:78%"><span class="num-percent">78%</span><span class="percent-subject">药学二</span></span> 11 </span> 12 <span class="bar"> 13 <span class="bar-percent" style="height:84%"><span class="num-percent">84%</span><span class="percent-subject">中药学综合知识</span></span> 14 </span> 15 <span class="bar"> 16 <span class="bar-percent" style="height:60%"><span class="num-percent">60%</span><span class="percent-subject">中药一</span></span> 17 </span> 18 <span class="bar"> 19 <span class="bar-percent" style="height:93%"><span class="num-percent">93%</span><span class="percent-subject">中药二</span></span> 20 </span> 21 <span class="bar"> 22 <span class="bar-percent" style="height:80%"><span class="num-percent">80%</span><span class="percent-subject">药事管理</span></span> 23 </span> 24 </div> 25 </div>
1 <style> 2 .chart { 3 width: 300px; 4 position: relative; 5 margin: 0 auto; 6 border-bottom: 1px solid #ccc; 7 } 8 9 .bar { 10 height: 170px; 11 width: 20px; 12 position: relative; 13 display: inline-block; 14 margin: 0 7px; 15 } 16 17 .bar-div { 18 justify-content: space-around; 19 display: flex; 20 padding-top: 20px; 21 } 22 23 .bar-percent { 24 background-color: #24BA09; 25 display: inline-block; 26 position: absolute; 27 bottom: 0; 28 width: 20px; 29 color: #fff; 30 line-height: 1.2; 31 text-align: center; 32 font-size: 12px; 33 } 34 35 .num-percent { 36 font-size: 10px; 37 color: #999; 38 position: absolute; 39 top: -13px; 40 left: 0; 41 } 42 43 .percent-subject { 44 position: relative; 45 top: 0%; 46 } 47 </style>
1 //提前引入jquery 2 <script> 3 window.onload=function(){ 4 //为了兼容ie8，设置条形图的每个条形的margin值来定位 5 var outWidth=$('.bar-div').width(); 6 var len=$('.bar-div .bar').length; 7 var width=$('.bar-div .bar').width(); 8 var marginNum=(outWidth-len*width)/len/2-2; 9 $('.bar-div .bar').each(function(){ 10 $(this).css({"margin":"0 "+marginNum+"px"}); 11 }); 12 //设置条形图中文字上下居中 13 $(".percent-subject").each(function(){ 14 var outHeight=$(this).parent().height(); 15 var height=$(this).height(); 16 var result=(outHeight-height)/2; 17 $(this).css({"top":result+"px"}); 18 }); 19 } 20 </script>
即可实现上述图中效果。