Javascript 响应性谷歌甜甜圈图表，带响应性饼孔？

我正在努力使我的谷歌图表具有响应性，这对我帮助很大：

<div class="embed-responsive embed-responsive-4by3">
  <div id="chart_div" class="embed-responsive-item"></div>
</div>

#pieHoleOverlay{
颜色：白色；
文本对齐：居中；
填充顶部：25px！重要；
}
皮埃霍尔先生{
显示：块；
背景：黑色；
高度：75px！重要；
宽度：75px！重要；
位置：绝对！重要；
z指数：10；
边界半径：100%；
顶部：140px！重要；
左：145px！重要；
}

测试99

您可以在图表的

'ready'

事件触发时定位覆盖

使用图表方法-->

getChartLayoutInterface（）.getBoundingBox（id）

这将为您传递的id提供边界

要找到图表本身的边界

chart.getChartLayoutInterface（）.getBoundingBox（'chart'）

要查找第一个饼图切片的边界等

chart.getChartLayoutInterface（）.getBoundingBox（'slice#0'）

使用每个切片的边界计算图表的总高度和总宽度（仅限切片）
然后乘以

pieHole

图表选项（

0.45

）

此外，为了使图表具有响应性，需要在窗口调整大小时重新绘制图表

请参阅以下工作片段

google.charts.load（'current'{
软件包：['corechart']
}).然后（函数（）{
var data=google.visualization.arrayToDataTable([
[“任务”，“每天工作小时数”]，
[Work'，11]，
[Eat'，2]，
[‘通勤’，2]，
[“看电视”，2]，
[Sleep'，7]
]);
变量选项={
标题：“我的日常活动”，
pieHole:0.45，
};
var container=document.getElementById（'piechart'）；
var chart=newgoogle.visualization.PieChart（容器）；
var overlay=document.getElementById（'pieHoleOverlay'）；
google.visualization.events.addListener（图表'ready'，函数（）{
var chartLayout=chart.getChartLayoutInterface（）；
var chartArea=chartLayout.getBoundingBox（“图表”）；
var pielables=container.getElementsByTagName（'text'）；
皮耶霍列维特变种；
var切片边界={
底部：空，
top:null，
左：空，
右：空，
高度：空，
宽度：空
};
对于（i=0；i0）{
overlay.className='pieHole'；
pieHoleWidth=（sliceBounds.width*options.pieHole）；
overlay.style.left=（sliceBounds.left+（sliceBounds.width/2）-（pieHoleWidth/2））+'px'；
overlay.style.width=pieHoleWidth+'px'；
overlay.style.height=overlay.style.width；
overlay.style.top=（（chartArea.height-chartArea.top）/2）-（pieHoleWidth/2））+'px'；
overlay.style.lineHeight=overlay.style.height；
如果（pieLabels.length>0）{
overlay.style.fontSize=pieLabels[0]。getAttribute（'font-size'）+'px'；
}
}否则{
overlay.className='hidden'；
}
});
图表绘制（数据、选项）；
window.addEventListener（'resize'，函数（）{
图表绘制（数据、选项）；
}，假）；
});
.pieHole{
背景：黑色；
边界半径：100%；
颜色：白色；
位置：绝对位置；
文本对齐：居中；
z指数：10；
}

测试99
我来这里是因为我以为有馅饼和甜甜圈。这个问题运气好吗？