在工作中遇到了写条形图的情况，因为文字，条形数量和条形图的颜色需要改变，所以不能用图片，所以决定写一个试试，写的比较简单，但毕竟是第一次，也遇到了一些问题，特意记录下来，以免忘记。
因为该页面还需要兼容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>