谷歌图表值从 Bootstrap 模式中的饼图向外 [英] Google chart value going outside from pie chart in Bootstrap modal

查看：15
本文介绍了谷歌图表值从 Bootstrap 模式中的饼图向外的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用谷歌图表来可视化我的数据，我正在使用 3d 饼图在引导模式中显示数据，但该值超出了我在谷歌上搜索的饼图但注意到这个问题

<div class="modal-body"><div class="chart" id="chart_div"></div>

<div class="modal-footer">

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

解决方案

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

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

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

google.charts.load('current', {包:['corechart']}).then(函数(){$("#myModal").on('shown.bs.modal', function () {var 数据 = google.visualization.arrayToDataTable([['任务'，'每天的小时数']，['工作'，11]，['吃'，2]，['通勤', 2],['看电视', 2],['睡觉'，7]]);变量选项 = {title: '我的日常活动',is3D: 真};var chart = new google.visualization.PieChart(document.getElementById('chart_div'));图表绘制(数据，选项)；});});

.button {左:50%；边距:0；位置:绝对；顶部:50%；变换:翻译(-50%，-50%)；文本对齐:居中；}.图表 {对齐内容:居中；显示:弹性；对齐内容:居中；}.modal {文本对齐:居中；}@media 屏幕和(最小宽度:768px){.modal:before {内容: " ";显示:内联块；高度:100%；垂直对齐:中间；}}.modal-dialog {显示:内联块；最小高度:230px；最小宽度:430px；文本对齐:居中；垂直对齐:中间；}.modal-页脚{颜色:#00b5e6；字体大小:25px；文本对齐:居中；}

<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><!-- 图表--><div class="button"><button class="btn btn-primary" data-toggle="modal" data-target="#myModal" class="myModal">图表</button>

<!-- 模态--><div class="modalfade" 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 class="modal-body"><div class="chart" id="chart_div"></div>

<div class="modal-footer">

注意:一个问题，图表将跟随其容器的大小
并且模态将遵循内容的大小
所以你必须给其中一个一个尺寸，
否则图表将是豌豆的大小
在上面的例子中，模态被赋予了一个最小的 css 大小

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/

解决方案

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

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

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆