带有响应式Pie孔的响应式Google Donut图表? [英] Responsive Google Donut chart with responsive Pie hole?

问题描述

我正在尝试使我的Google图表具有响应性，这对我有很大帮助:

I am trying to make my google charts responsive and this help me out a lot:

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

因为我也在使用引导程序.但是，通过我的PieChart，我在中间的圆孔中添加了一个叠加层.我该如何使Piehole叠加层也具有响应性，就像在代码预览中一样，它位于中心位置，但现在还差得远，调整浏览器的大小并不能使它变得更好.

as I am using bootstrap as well. But with my PieChart I added an overlay in the center piehole. How do I make the piehole overlay responsive as well, like in the code preview it was in the center but now it is way off and resizing the browser doesn't make it better.

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>

推荐答案

您可以在图表的'ready'事件触发时放置叠加层...

you can position the overlay when the chart's 'ready' event fires...

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

这将为您传递的ID赋予边界

this will give you the bounds for the id you pass

查找图表本身的界限...

to find the bounds of the chart itself...

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

查找第一个饼图的边界，等等...

to find the bounds of the first pie slice, etc...

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

使用每个切片的边界来计算图表的总高度和宽度(仅限切片)
然后乘以 pieHole 图表选项( 0.45 )

use the bounds from each slice to calculate the total height and width of the chart (slices only)
then multiply by the pieHole chart option (0.45)

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

also, to make the chart responsive, it needs to be re-drawn when the window resizes

请参阅以下工作摘要...

see following working snippet...

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>

这篇关于带有响应式Pie孔的响应式Google Donut图表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！