Google Charts - レスポンシブな問題 - 動的にサイズ変更

Question

私はGoogle Column Material Chartを反応させようとしていますが、ちょっとうんざりしていてうまく動作しません。誰も私がこの流れを良くするのを助けることができます

グラフは、ページが読み込まれるときにその形式でのみ表示されます。ブラウザウィンドウの幅が変更されると、動的にサイズが変更されません。

JSFIDDLE https://jsfiddle.net/rbla/Le8g0sw0/8/

HTML

<div id="chart"> 
    <div id="chart_div"></div> 
</div> 

CSS

#chart { 
    border:5px solid #AAA; 
    width: 80%; 
    min-height: 450px; 
} 

JS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 

<script> 

    google.charts.load('current', {'packages':['bar']}); 
    google.charts.setOnLoadCallback(drawChart); 

    function drawChart() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Year', 'Sales', 'Expenses', 'Profit'], 
     ['2014', 1000, 400, 200], 
     ['2015', 1170, 460, 250], 
     ['2016', 660, 1120, 300], 
     ['2017', 1030, 540, 350] 
    ]); 

    var options = { 
     chart: { 
     title: 'Company Performance', 
     subtitle: 'Sales, Expenses, and Profit: 2014-2017', 
     }, 
     bars: 'vertical', 
     vAxis: {format: 'decimal'}, 
     height: 400, 
     colors: ['#1b9e77', '#d95f02', '#7570b3'] 
    }; 

    var chart = new google.charts.Bar(document.getElementById('chart_div')); 

    chart.draw(data, google.charts.Bar.convertOptions(options)); 



    } 

    // REFLOW 
    $(window).resize(function(){ 
     drawChart(); 
    }); 

Answer 1

変更100から80までパーセントから幅この例のように％：フィドルで

#chart { 
    border: 5px solid #AAA; 
    width: 100%; 
    min-height: 450px; 
} 

Answer 2

、あなたはしかし、jQueryのは...

使用が含まれていません...サイズを変更するウィンドウをリッスンするために

$(window).resize(function(){ 
     drawChart(); 
    }); 

をjQueryのを使用しているaddEventListener代わりに、または
が作業スニペットを次のように表示jQueryのへの参照を、...含ん

google.charts.load('current', { 
 
    packages: ['bar'] 
 
}).then(drawChart); 
 

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['Year', 'Sales', 'Expenses', 'Profit'], 
 
    ['2014', 1000, 400, 200], 
 
    ['2015', 1170, 460, 250], 
 
    ['2016', 660, 1120, 300], 
 
    ['2017', 1030, 540, 350] 
 
    ]); 
 

 
    var options = { 
 
    chart: { 
 
     title: 'Company Performance', 
 
     subtitle: 'Sales, Expenses, and Profit: 2014-2017', 
 
    }, 
 
    bars: 'vertical', 
 
    vAxis: {format: 'decimal'}, 
 
    height: 400, 
 
    colors: ['#1b9e77', '#d95f02', '#7570b3'] 
 
    }; 
 

 
    var chart = new google.charts.Bar(document.getElementById('chart_div')); 
 
    chart.draw(data, google.charts.Bar.convertOptions(options)); 
 
    window.addEventListener('resize', drawChart, false); 
 
}

#chart { 
 
    border: 5px solid #AAA; 
 
    min-height: 450px; 
 
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart"> 
 
    <div id="chart_div"></div> 
 
</div>