如何让Google甜甜圈图的Pie Hole覆盖层实现响应式？

你的问题核心在于覆盖层用了固定像素值的宽高和定位，这在响应式容器里必然会随着窗口缩放出现偏移。咱们可以通过CSS的相对定位+百分比+transform方案，让覆盖层始终牢牢固定在饼图中心，完美适配响应式布局。

具体修改步骤： #

1. 给父容器添加相对定位：绝对定位的元素是相对于最近的已定位父元素来定位的，所以给.embed-responsive加上position: relative，让覆盖层的定位基准变成饼图容器。

2. 重构覆盖层的CSS规则：

   • 把固定的75px宽高改成百分比（比如30%，可根据你的pieHole大小调整），让覆盖层跟着容器同步缩放。
   • 用top: 50%和left: 50%把覆盖层的左上角移到容器中心，再通过transform: translate(-50%, -50%)让覆盖层自身向左向上偏移一半尺寸，实现精准居中。
   • 移除固定的top/left像素值，以及不必要的!important声明。

3. 可选：监听窗口resize事件：虽然CSS已经能处理大部分场景，但如果图表在窗口缩放时需要重新绘制，添加resize监听可以确保覆盖层始终对齐。

修改后的完整代码： #

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<style>
#pieHoleOverlay {
  color: white;
  text-align: center;
  padding-top: 25%; /* 用百分比代替固定像素，适配不同容器大小 */
}
.embed-responsive {
  position: relative; /* 新增：让子元素的绝对定位基于此容器 */
}
.pieHole {
  display: block;
  background: black;
  height: 30% !important; /* 百分比宽高适配响应式 */
  width: 30% !important;
  position: absolute !important;
  z-index: 10;
  border-radius: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 完美居中的核心写法 */
}
</style>

<div class="embed-responsive embed-responsive-4by3">
  <div id="piechart" class="embed-responsive-item"></div>
  <div id="pieHoleOverlay" class="pieHole">test 99</div>
</div>

<script>
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work', 11],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 7]
  ]);

  var options = {
    title: 'My Daily Activities',
    pieHole: 0.45,
  };

  var chart = new google.visualization.PieChart(document.getElementById('piechart'));
  chart.draw(data, options);

  // 可选：监听窗口resize，确保图表重绘后覆盖层位置正确
  window.addEventListener('resize', function() {
    chart.draw(data, options);
  });
}
</script>

关键逻辑解释： #

• transform: translate(-50%, -50%) 是元素居中的黄金方案，它基于元素自身的宽高计算偏移量，不管元素大小怎么变化，都能精准居中。
• 百分比的宽高和内边距会跟着父容器的尺寸同步调整，完美适配Bootstrap的响应式容器。
• 父容器的position: relative是绝对定位元素正确对齐的前提，否则覆盖层会相对于整个页面定位，必然出现偏移。

这样修改后，无论你怎么缩放浏览器窗口，覆盖层都会稳稳固定在饼图的中心洞里啦！

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