Responsive Google Diagramm - Säulendiagramm

Question

Ich versuche dieses Google Chart ohne Erfolg zu reagieren. Es enthält den neuesten und aktuellsten Google Chart Code. Bitte helfen Sie mir, diesen Code ansprechend zu gestalten. Ich habe ein JFiddle eingeschlossen.

https://jsfiddle.net/rbla/h8faga72/1/

Die HTML wird

<div id="visualization_wrap"> 
    <div id="Sarah_chart_div"></div> 
</div> 

Die CSS ist

body { 
    width:80%; 
    margin:10% auto; 
    background:#e6e6e6; 
} 
#visualization_wrap { 
    border:2px solid gray; 
    position: relative; 
    padding-bottom: 80%; 
    height: 0; 
    overflow:hidden; 
} 
#Sarah_chart_div { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width:100%; 
    height:100%; 
} 

der Javascript ist

// Load Charts and the corechart package. 
    google.charts.load('current', {'packages':['corechart']}); 

    // Draw the pie chart for Sarah's pizza when Charts is loaded. 
    google.charts.setOnLoadCallback(drawSarahChart); 



    // Callback that draws the pie chart for Sarah's pizza. 
    function drawSarahChart() { 

    // Create the data table for Sarah's pizza. 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Topping'); 
    data.addColumn('number', 'Slices'); 
    data.addRows([ 
     ['Mushrooms', 1], 
     ['Onions', 1], 
     ['Olives', 2], 
     ['Zucchini', 2], 
     ['Pepperoni', 1] 
    ]); 

    // Set options for Sarah's pie chart. 
    var options = { 
        title:'How Much Pizza Sarah Ate Last Night', 
        // width:400, 
        // height:300 
        //width: '100%', 
        //height: '100%', 
        chartArea: { 
     left: "10%", 
     top: "10%", 
     height: "70%", 
     width: "70%" 
    } 
        }; 

    // Instantiate and draw the chart for Sarah's pizza. 
    var chart = new google.visualization.ColumnChart(document.getElementById('Sarah_chart_div')); 
    chart.draw(data, options); 

    $(document).ready(function() { 
     $(window).resize(function(){ 
    drawSarahChart(); 
    }); 
    }); 
    } 

Answer 1

gerade diese

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

Zusätzlich zu Ihrem .html hinzufügen, dass Sie muss klar sein, in dem das Verfahren aus welcher Bibliothek kommt. Es hilft Ihnen bei der Codierung.