Question

我正在使用谷歌图表并将它们放在引导程序面板中。当面板调整大小时，如何使图表重新调整大小？有时它们在特定分辨率下看起来没问题，有时显示会被切断。

放大时获取截止值：

我的cshtml：

<div class="col-lg-12">
    <div class="col-md-4 col-sm-4">
        <div class="panel panel-default">
            <div class="panel-heading" style="font-weight:900">CHART #1
            </div>
            <div class="panel-body">
                <div id="stakeholder-chart"></div>
            </div>
        </div>
    </div>
</div>

我的JS用于图表选项：

width: 500,
 height: 400,

Answer 1

我自己寻找解决方案，并找到Flo Preyant's example。我可以将他的CodePen复制到一个答案中，但是你应该亲自看看它并且归功于他。

它不是特定的Bootstrap（或BS Panel），但它对浏览器宽度有响应。

HTML：

(int) (char) (byte) -1

和CSS：

<div class="grid">
  <div class="col-1-2">
    <div id="chart_div1" class="chart"></div>
  </div>
  <div class="col-1-2">
    <div id="chart_div2" class="chart"></div>
  </div>
</div>

他在JavaScript中的图表：

* {
  @include box-sizing(border-box);
}

$pad: 20px;

.grid {
  background: white;
  margin: 0 0 $pad 0;

  &:after {
    /* Or @extend clearfix */
    content: "";
    display: table;
    clear: both;
  }
}

[class*='col-'] {
  float: left;
  padding-right: $pad;
  .grid &:last-of-type {
    padding-right: 0;
  }
}
.col-2-3 {
  width: 66.66%;
}
.col-1-3 {
  width: 33.33%;
}
.col-1-2 {
  width: 50%;
}
.col-1-4 {
  width: 25%;
}
.col-1-8 {
  width: 12.5%;
}

/* Opt-in outside padding */
.grid-pad {
  padding: $pad 0 $pad $pad;
  [class*='col-']:last-of-type {
    padding-right: $pad;
  }
}
.chart {
  width: 100%; 
  height: 600px;
}

Answer 2

尝试将chartArea选项添加到您的JS选项中，例如：

chartArea: {
            left: 0,
            top: 0,
            width: '100%',
            height: '100%',
        },

或者如果你使用一些填充只是减少那些。

谷歌图表：如何在面板内自动重新调整尺寸？

2 个答案: