Machen Sie Google-Diagramm responsive

Question

Im mit Google-Charts in einem Projekt, aber ich habe eine harte Zeit, um sie reagieren zu lassen.

Ich habe andere Beispiele auf reaktionsschnellen Diagrammen gesehen, aber in meinem Fall scheint es nicht zu funktionieren. Alle meine Diagramme werden gerendert und danach ändern sich ihre Größen nicht.

Wenn jemand kann dieses Diagramm reagieren ID schätzen es. Danke:

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 für das Diagramm: Fiddle

Wenn es eine prozentuale Breite eines Elternteils übernehmen könnte es

Answer 1

groß sein würde, da ich noch nicht kommentieren kann, ich habe um dies als Antwort einzureichen, obwohl ich es nicht für eine lohnende Antwort halte.

Sie müssen Ihre drawChart() -Funktion aufrufen, wenn das Fenster in der Größe geändert wird, um das gewünschte Verhalten zu erhalten. Google "Responsive Google Charts") und schauen Sie sich die first link. Es beschreibt, wie diese JQuery verwenden getan werden kann:

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

Mit nur Javascript, this answer on Stack Exchange by Sohnee beschreibt, wie Funktionen auslösen bei einem Resize-Ereignis:

window.onresize = doALoadOfStuff; 

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

Alle Kredite an beide Autoren der oben aufgeführten Links.