javascript - 响应式谷歌 donut chart 和响应式饼图？

Question

我正在尝试使我的 google 图表响应迅速，这对我帮助很大:

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

因为我也在使用 Bootstrap 。但是在我的 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.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>