响应式谷歌甜甜圈图表与响应式馅饼孔？

Question

我正在尝试让我的google图表响应，这对我有很大的帮助：

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

因为我也在使用bootstrap。但在我的PieChart中，我在中间的小孔中添加了一个覆盖层。我如何让piehole overlay也响应，就像在代码预览中，它位于中心位置，但现在它已经不在了，调整浏览器的大小也不会让它变得更好。

​

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>

​