使谷歌圖表響應

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: '%'
}