使google图表响应式

Question

我在一个项目中使用谷歌图表，但我有一个艰难的时间来使他们的反应。

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

如果有人能让这张图表反应灵敏，我将不胜感激。谢谢你：

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

如果它能占据父级的百分比宽度，那就太好了。

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
}

所有的功劳都归功于上述链接的两位作者。

Answer 2

将width_units添加到您的选项块：

var options = {
    width: 80,
    width_units: '%'
}