帶有響應式Pie孔的響應式Google Donut圖表？

Question

我正在嘗試使我的Google圖表具有響應性，這對我有很大幫助：

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

因為我也在使用引導程序。 但是，通過我的PieChart，我在中間的圓孔中添加了一個疊加層。 我如何使Piehole疊加層也具有響應性，就像在代碼預覽中一樣，它位於中間，但是現在已經不遠了，調整瀏覽器的大小並不能使其更好。

 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); } 

 #pieHoleOverlay { color:white; text-align: center; padding-top: 25px!important; } .pieHole { display: block; background: black; height: 75px !important; width: 75px !important; position: absolute !important; z-index: 10; border-radius: 100%; top: 140px !important; left: 145px !important; } 

 <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> <div class="embed-responsive embed-responsive-4by3"> <div id="piechart" class="embed-responsive-item"></div> <div id="pieHoleOverlay" class="pieHole">test 99</div> </div> 

Answer 1

您可以在圖表的'ready'事件觸發時放置疊加層...

使用圖表方法-> getChartLayoutInterface().getBoundingBox(id)

這將為您傳遞的ID提供界限

找到圖表本身的界限...

chart.getChartLayoutInterface().getBoundingBox('chart')

查找第一個餅圖的邊界，等等...

chart.getChartLayoutInterface().getBoundingBox('slice#0')

使用每個切片的邊界來計算圖表的總高度和寬度（僅限切片）
然后乘以pieHole圖表選項（ 0.45 ）

同樣，為了使圖表具有響應性，需要在調整窗口大小時重新繪制圖表

請參閱以下工作片段...

 google.charts.load('current', { packages:['corechart'] }).then(function () { 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 container = document.getElementById('piechart'); var chart = new google.visualization.PieChart(container); var overlay = document.getElementById('pieHoleOverlay'); google.visualization.events.addListener(chart, 'ready', function () { var chartLayout = chart.getChartLayoutInterface(); var chartArea = chartLayout.getBoundingBox('chart'); var pieLabels = container.getElementsByTagName('text'); var pieHoleWidth; var sliceBounds = { bottom: null, top: null, left: null, right: null, height: null, width: null }; for (i = 0; i < data.getNumberOfRows(); i++) { var slice = chartLayout.getBoundingBox('slice#' + i); var sliceBottom = slice.top + slice.height; var sliceRight = slice.left + slice.width; sliceBounds.bottom = Math.max(sliceBottom, (sliceBounds.bottom || sliceBottom)); sliceBounds.right = Math.max(sliceRight, (sliceBounds.right || sliceRight)); sliceBounds.top = Math.min(slice.top, (sliceBounds.top || slice.top)); sliceBounds.left = Math.min(slice.left, (sliceBounds.left || slice.left)); } sliceBounds.height = sliceBounds.bottom - sliceBounds.top; sliceBounds.width = sliceBounds.right - sliceBounds.left; if (data.getNumberOfRows() > 0) { 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; if (pieLabels.length > 0) { overlay.style.fontSize = pieLabels[0].getAttribute('font-size') + 'px'; } } else { overlay.className = 'hidden'; } }); chart.draw(data, options); window.addEventListener('resize', function () { chart.draw(data, options); }, false); }); 

 .pieHole { background: black; border-radius: 100%; color: white; position: absolute; text-align: center; z-index: 10; } 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="embed-responsive embed-responsive-4by3"> <div id="piechart" class="embed-responsive-item"></div> <div id="pieHoleOverlay" class="hidden">test 99</div> </div>