角度のGoogleグラフ - 自動高さ

Question

私はこのプラグインを使用しています。

https://github.com/angular-google-chart/angular-google-chart

と私はタイプBarChartコントロールで自動身長を定義するのに役立つ必要があります。 大きすぎるとスクロールします。

ありがとうございました！

Answer 1

自動的<div>

のスタイルを設定し、チャート

、チャートがするresize上に任意の特定heightまたはwidth設定オプションを失う含む<div>

使用CSSを記入しますチャート再描画が必要

`$ scope.topDez.options = { 'タイトル'：グラムの例は角ではなく、チャートは同じ

google.charts.load('current', { 
 
    callback: function() { 
 
    var dataTable = new google.visualization.DataTable({ 
 
     cols: [ 
 
     {label: 'Month', type: 'string'}, 
 
     {label: 'Amount', type: 'number'}, 
 
     {role: 'style', type: 'string'} 
 
     ], 
 
     rows: [ 
 
     {c:[{v: 'April'}, {v: 12}, {v: '#c62828'}]}, 
 
     {c:[{v: 'May'}, {v: 10}, {v: '#ad1457'}]}, 
 
     {c:[{v: 'June'}, {v: 8}, {v: '#6a1b9a'}]}, 
 
     {c:[{v: 'July'}, {v: 6}, {v: '#4527a0'}]}, 
 
     {c:[{v: 'August'}, {v: 4}, {v: '#283593'}]}, 
 
     {c:[{v: 'September'}, {v: 2}, {v: '#1565c0'}]}, 
 
     {c:[{v: 'October'}, {v: 2}, {v: '#00838f'}]}, 
 
     {c:[{v: 'November'}, {v: 4}, {v: '#00695c'}]}, 
 
     {c:[{v: 'December'}, {v: 6}, {v: '#2e7d32'}]}, 
 
     {c:[{v: 'January'}, {v: 8}, {v: '#9e9d24'}]}, 
 
     {c:[{v: 'February'}, {v: 10}, {v: '#f9a825'}]}, 
 
     {c:[{v: 'March'}, {v: 12}, {v: '#d84315'}]} 
 
     ] 
 
    }); 
 

 
    var options = { 
 
     backgroundColor: 'transparent', 
 
     legend: 'none', 
 
     theme: 'maximized' 
 
    }; 
 

 
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
 
    chart.draw(dataTable, options); 
 

 
    $(window).resize(function() { 
 
     chart.draw(dataTable, options); 
 
    }); 
 
    }, 
 
    packages:['corechart'] 
 
});

body { 
 
    margin: 0; 
 
} 
 

 
.header { 
 
    background-color: red; 
 
    height: 40px; 
 
} 
 

 
.mainBody { 
 
    background-color: yellow; 
 
    bottom: 20px; 
 
    position: absolute; 
 
    top: 40px; 
 
    width: 100%; 
 
} 
 

 
.footer { 
 
    background-color: blue; 
 
    bottom: 0; 
 
    height: 20px; 
 
    position: absolute; 
 
    width: 100%; 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<div class="header" >&nbsp;</div> 
 
<div class="mainBody" id="chart_div"></div> 
 
<div class="footer">&nbsp;</div>