CSS+HTML+JQuery实现条形图
16lz
2021-01-22
在工作中遇到了写条形图的情况，因为文字，条形数量和条形图的颜色需要改变，所以不能用图片，所以决定写一个试试，写的比较简单，但毕竟是第一次，也遇到了一些问题，特意记录下来，以免忘记。
因为该页面还需要兼容ie8，处理每个条形的间距也是一个问题。所以使用justify-content:space-around;来让每个条形两端对齐，但是并不兼容ie8，于是通过js来计算每个条形之间的margin值来控制条形能达到两端对齐的效果。
还有一个问题是：文字无法上下居中，于是把文字单独写到一个span标签中，通过js来控制span的位置。
具体代码如下：
1 <div class="chart">html
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>css
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 //提前引入jqueryjs
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>
即可实现上述图中效果。