javascript - 使谷歌图表响应

Question

我在一个项目中使用谷歌图表，但我很难让它们做出响应。

我在响应式图表上看到了其他示例，但我似乎无法让它在我的情况下工作。
我所有的图表都会被渲染，之后它们的大小不会改变。

如果有人可以让这个图表响应 id 不胜感激。谢谢:

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Year');
    data.addColumn('number', 'Revenue');
    data.addColumn('number', 'Average Revenue');
    data.addRows([
      ['2004', 1000, 630],
      ['2005', 1170, 630],
      ['2006', 660, 630],
      ['2007', 1030, 630]
    ]);

    var options = {
      title: 'Revenue by Year',
      seriesType: "bars",
      series: {1: {type: "line"}},  
      vAxis: {title: 'Year',
              titleTextStyle:{color: 'red'}},
        colors:['red','black']
    };

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

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);

fiddle 的图表:
Fiddle

如果它可以占据 parent 的百分比宽度，那就太好了

Answer 1

该解决方案已在其他地方在线提供。
每当调整窗口大小以获得所需的行为时，您都需要调用 drawChart() 函数。网站flopreynat.com准确描述了这个问题和解决方案(codepen)。它描述了如何使用 JQuery 来完成:

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

仅使用 Javascript， this answer on Stack Exchange by Sohnee描述了如何在调整大小事件时触发函数:

window.onresize = doALoadOfStuff;

function doALoadOfStuff() {
    //do a load of stuff
}

上述链接的两位作者都归功于此。