谷歌图表值超出引导模式中的饼图答案

【问题标题】：Google chart value going outside from pie chart in Bootstrap modal谷歌图表值超出引导模式中的饼图
【发布时间】：2018-02-01 10:05:29
【问题描述】：

我正在使用 Google 图表来可视化我的数据，并且我正在使用 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/

【问题讨论】：

标签： javascript jquery twitter-bootstrap charts google-visualization

【解决方案1】：

标签的问题是由于在隐藏容器时绘制图表

而不是在谷歌加载时绘制图表，
等到模态显示出来

在模态上，听 --> 'shown.bs.modal'
然后绘制图表，看下面的工作 sn-p...

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

【讨论】：