谷歌圖表：如何自動重新調整面板內的大小？

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

嘗試添加chartArea選項給你的JS選項，類似的例子：

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

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

Answer 2

我正在四處尋找解決方案，並找到Flo Preyant's example。我可以將他的CodePen複製到一個答案中，但是你應該親自看到它，並且學分會發給他。

這不是Bootstrap（或BS Panel）特有的，但它對瀏覽器寬度的響應。

HTML：

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

和CSS：

* { 
    @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; 
} 

而且他的圖表中的JavaScript：

google.load("visualization", "1", {packages:["corechart"]}); 
google.setOnLoadCallback(drawChart1); 
function drawChart1() { 
    var data = google.visualization.arrayToDataTable([ 
    ['Year', 'Sales', 'Expenses'], 
    ['2004', 1000,  400], 
    ['2005', 1170,  460], 
    ['2006', 660,  1120], 
    ['2007', 1030,  540] 
    ]); 

    var options = { 
    title: 'Company Performance', 
    hAxis: {title: 'Year', titleTextStyle: {color: 'red'}} 
}; 

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div1')); 
    chart.draw(data, options); 
} 

google.load("visualization", "1", {packages:["corechart"]}); 
google.setOnLoadCallback(drawChart2); 
function drawChart2() { 
    var data = google.visualization.arrayToDataTable([ 
    ['Year', 'Sales', 'Expenses'], 
    ['2013', 1000,  400], 
    ['2014', 1170,  460], 
    ['2015', 660,  1120], 
    ['2016', 1030,  540] 
    ]); 

    var options = { 
    title: 'Company Performance', 
    hAxis: {title: 'Year', titleTextStyle: {color: '#333'}}, 
    vAxis: {minValue: 0} 
    }; 

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div2')); 
    chart.draw(data, options); 
} 

$(window).resize(function(){ 
    drawChart1(); 
    drawChart2(); 
}); 

// Reminder: you need to put https://www.google.com/jsapi in the head of your document or as an external resource on codepen //