如何实现柱状图在圆形遮罩内显示？（附代码）

嘿，我来帮你搞定这个圆形遮罩的柱状图效果！你现在遇到的问题主要是两个：圆形遮罩没能覆盖在柱状图上方，同时柱状图也没有被限制在圆形范围内。咱们通过调整结构和CSS属性就能解决，具体步骤如下：

核心问题分析 #

1. 原来的HTML结构里，#mask包裹了#bars，这种结构会让遮罩成为柱状图的父元素，没法实现“遮罩覆盖在柱状图上方”的效果。
2. #mask的background设置为白色，会直接盖住下方的柱状图，而且没有设置overflow: hidden，没法裁剪超出圆形的部分。
3. z-index层级设置错误，导致柱状图跑到了遮罩上方。

修改后的完整代码 #

HTML代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chart">
  <ul id="bars">
    <li><div data-percentage="56" class="bar bar-1"></div><span>Russian Federation</span></li>
    <li><div data-percentage="33" class="bar bar-2"></div><span>All 50 countries</span></li>
  </ul>
  <div id="mask"></div>
</div>

CSS代码 #

@import url(https://fonts.googleapis.com/css?family=Roboto:400+700);
body { background: #30303A; font-family: Roboto; }
#chart { 
  width: 250px; 
  height: 200px; 
  margin: 30px auto 0; 
  display: block; 
  position: relative; /* 新增：让内部绝对定位元素相对它定位 */
}
#chart #numbers { width: 50px; height: 100%; margin: 0; padding: 0; display: inline-block; float: left; }
#chart #numbers li { text-align: right; padding-right: 1em; list-style: none; height: 29px; border-bottom: 1px solid #444; position: relative; bottom: 30px; }
#chart #numbers li:last-child { height: 30px; }
#chart #numbers li span { color: #eee; position: absolute; bottom: 0; right: 10px; }
#chart #bars { 
  display: inline-block; 
  background: rgba(0, 0, 0, 0.2); 
  width: 200px; 
  height: 200px; 
  padding: 0; 
  margin: 0; 
  box-shadow: 0 0 0 1px #444;
  position: relative; /* 新增：确保z-index生效 */
  z-index: 1; 
}
#chart #bars li { display: table-cell; width: 100px; height: 200px; margin: 0; text-align: center; position: relative; }
#chart #bars li .bar { 
  display: block; 
  width: 70px; 
  margin-left: 15px; 
  background: #49E; 
  position: absolute; 
  bottom: 0; 
  z-index: 0; /* 调整：让bar在mask下方 */
}
#chart #bars li .bar:before { color: white; content: attr(data-percentage) '%'; position: relative; bottom: 25px; }
#chart #bars li .bar:hover { background: #5AE; cursor: pointer; }
#chart #bars li span { color: #eee; width: 100%; position: absolute; bottom: -3em; left: 0; text-align: center; }
#chart #bars li .bar.bar-1 { background: #cd9581 ; }
#chart #bars li .bar.bar-2 { background: #002f54 ; }
#chart #bars li .bar.bar-3 { background: #f5e0b8 ; }
#mask { 
  border: 1px solid #fff; 
  border-radius: 50%; 
  background: transparent; /* 修改：去掉白色背景，避免盖住柱状图 */
  position: absolute; 
  z-index: 2; /* 调整：让mask在bars上方 */
  width: 200px; 
  height: 200px; 
  top: 0; 
  left: 50px; /* 调整：和bars的位置对齐 */
  overflow: hidden; /* 新增：裁剪超出圆形的柱状图部分 */
}

JS代码（无需修改） #

$(function() { 
  $("#bars li .bar").each( function( key, bar ) { 
    var percentage = $(this).data('percentage'); 
    $(this).animate({ 'height' : percentage + '%' }, 1000); 
  }); 
});

关键修改说明 #

1. 调整HTML结构：把#mask从#bars的父元素改成同级，放在#bars后面，这样遮罩可以直接覆盖在柱状图上方。
2. 设置父容器相对定位：给#chart添加position: relative，让#mask的绝对定位基于#chart，确保位置正确。
3. 优化遮罩样式：
   • 将background改为transparent，这样不会挡住下面的柱状图，只保留圆形边框。
   • 添加overflow: hidden，这样柱状图超出圆形的部分会被自动裁剪，完美显示在圆形内部。
   • 调整z-index: 2，确保遮罩层级高于柱状图。
4. 调整柱状图层级：把.bar的z-index设为0，确保它在遮罩下方。

这样修改后，柱状图就会乖乖显示在圆形遮罩内部，遮罩边框也会正确覆盖在柱状图上方啦！

内容的提问来源于stack exchange，提问作者Kunal Vijan