Javascript 谷歌图表-响应问题-动态调整大小

我正试图让我的谷歌专栏材料图表反应灵敏，但它对我来说似乎有点不稳定，根本不起作用。谁能帮我把这个流程做好

只有在加载页面时，图表才会以该格式显示。更改浏览器窗口宽度时，它不会动态调整大小

JSFIDLE

HTML

JS

load（'current'，{'packages'：['bar']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
[“年度”、“销售额”、“费用”、“利润”]，
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
变量选项={
图表：{
标题：“公司业绩”，
字幕：“销售、费用和利润：2014-2017”，
},
酒吧：“垂直”，
变量：{format:'decimal'}，
身高：400，
颜色：['1b9e77'、'd95f02'、'7570b3']
};
var chart=new google.charts.Bar（document.getElementById（'chart_div'）；
绘制（数据，google.charts.Bar.convertOptions（选项））；
}
//回流焊
$（窗口）。调整大小（函数（）{
图纸（）；
});

将宽度从80%更改为100%，如以下示例所示：

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

---

在小提琴中，您正在使用JQuery来侦听窗口大小调整

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

但是，JQuery不包括在内

改用

addEventListener

，或包含对JQuery的引用，
请参阅以下工作片段

google.charts.load（'current'{
套餐：['bar']
}).然后（图纸）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
[“年度”、“销售额”、“费用”、“利润”]，
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
变量选项={
图表：{
标题：“公司业绩”，
字幕：“销售、费用和利润：2014-2017”，
},
酒吧：“垂直”，
变量：{format:'decimal'}，
身高：400，
颜色：['1b9e77'、'd95f02'、'7570b3']
};
var chart=new google.charts.Bar（document.getElementById（'chart_div'）；
绘制（数据，google.charts.Bar.convertOptions（选项））；
window.addEventListener（'resize'，drawChart，false）；
}

#图表{
边框：5px实心#AAA；
最小高度：450px；
}

我已将宽度更改为100%-但调整大小时不会回流-运行此操作时效果良好，但调整大小时不会。请使用投票按钮附近的复选标记将答案标记为已接受，好吗？这将允许我将其他问题标记为此问题的副本。。。

<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();
    });

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

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