[解決済み] googleチャートのレスポンシブ化

質問

プロジェクトでグーグルチャートを使っていますが、レスポンシブにするのに苦労しています。

レスポンシブチャートに関する他の事例を見ましたが、私のケースではうまくいきません。 私のチャートはすべてレンダリングされ、その後、そのサイズは変更されません。

もし誰かがこのチャートをレスポンシブにすることができれば、私はそれを感謝します。ありがとうございます。

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

チャート用のフィドルです。 フィドル

親の幅の何パーセントかを占めることができれば最高です。

解決方法は？

解決策は、すでに他の場所でオンライン公開されています。

望ましい動作を得るためには、ウィンドウのサイズが変更されるたびにdrawChart()関数を呼び出す必要があります。 このウェブサイト フロップレイナ・ドット・コム は、この問題と解決策を正確に説明しています ( コードペン ). JQueryを使ってどのように実現できるかが書かれています。

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

Javascriptだけを使って。 Stack Exchange での Sohnee さんの回答です。 は、リサイズイベントの際に関数をトリガーする方法を説明しています。

window.onresize = doALoadOfStuff;

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

上記リンクの作者両名に感謝します。