Google chart value going outside from pie chart in Bootstrap modal

问题

I'm using Google chart to visualize my data and i'm using 3d pie chart to show data in bootstrap modal but the value is going outside from the pie chart i searched on google but get noting on this issue

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        <div class="chart" id="chart_div"></div>
      </div>
      <div class="modal-footer">
      </div>
    </div>
  </div>
</div>

my jsfiddle :- https://jsfiddle.net/L0pt229a/

回答1:

the problem with the labels is due to drawing the chart while its container is hidden

instead of drawing the chart when google loads,
wait until the modal is shown

on the modal, listen for --> 'shown.bs.modal'
then draw the chart, see following working snippet...

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  $("#myModal").on('shown.bs.modal', 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',
      is3D: true
    };

    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  });
});

.button {
  left: 50%;
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.chart {
  align-content: center;
  display: flex;
  justify-content: center;
}

.modal {
  text-align: center;
}

@media screen and (min-width: 768px) {
  .modal:before {
    content: " ";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
}

.modal-dialog {
  display: inline-block;
  min-height: 230px;
  min-width: 430px;
  text-align: center;
  vertical-align: middle;
}

.modal-footer {
  color: #00b5e6;
  font-size: 25px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- Chart -->
<div class="button">
  <button class="btn btn-primary" data-toggle="modal" data-target="#myModal" class="myModal">Chart</button>
</div>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        <div class="chart" id="chart_div"></div>
      </div>
      <div class="modal-footer">
      </div>
    </div>
  </div>
</div>

note: one issue, the chart will follow the size of its container
and the modal will follow the size of the content
so you must give one of them a size,
or the chart will be the size of a pea
in the example above, the modal is given a min css size

来源：https://stackoverflow.com/questions/48560029/google-chart-value-going-outside-from-pie-chart-in-bootstrap-modal

标签

javascript

jquery

twitter-bootstrap

charts

google-visualization