谷歌圖表值從 Bootstrap 模式中的餅圖向外

Question

我正在使用谷歌圖表來可視化我的數據，我正在使用 3d 餅圖以引導模式顯示數據，但該值超出了我在谷歌上搜索的餅圖但注意到這個問題

<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>

我的 jsfiddle :- https://jsfiddle.net/L0pt229a/

Answer 1

標簽的問題是由於在隱藏容器時繪制圖表

而不是在谷歌加載時繪制圖表，
等到顯示模態

在模態上，聽 --> 'shown.bs.modal'
然后繪制圖表，請參閱以下工作片段...

 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>

注意：一個問題，圖表將遵循其容器的大小
並且模態將跟隨內容的大小
所以你必須給其中一個一個尺寸，
或者圖表將是豌豆的大小
在上面的例子中，模態被賦予了一個最小的 css 大小