使谷歌图表响应

Question

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

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

如果有人可以使此图表具有响应性，我将不胜感激。 谢谢：

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

图表的小提琴：小提琴

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

Answer 1

其他地方网上已经给出了解决方案。

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

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

仅使用 Javascript， Sohnee 在 Stack Exchange 上的这个答案描述了如何在调整大小事件时触发函数：

window.onresize = doALoadOfStuff;

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

以上链接均归功于两位作者。

Answer 2

将 width_units 添加到您的选项块：

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