Google图表值从Bootstrap模态中的饼图中移出 [英] Google chart value going outside from pie chart in Bootstrap modal

问题描述

我正在使用Google图表可视化我的数据，并且正在使用3D饼图以自举模式显示数据，但该值超出了我在Google上搜索的饼图的范围，但注意到了这个问题

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>

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

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

推荐答案

标签的问题是由于在隐藏容器的情况下绘制了图表

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

而不是在Google加载时绘制图表，
等到显示模态

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

在模态上，听-> 'shown.bs.modal'
然后绘制图表，请参见以下工作片段...

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>

注意:一个问题，图表将遵循其容器的大小
并且模式将遵循内容的大小
所以您必须给其中一个尺寸，
否则图表将是豌豆的大小
在上面的示例中，模态的最小css大小

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

这篇关于Google图表值从Bootstrap模态中的饼图中移出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！