レスポンシブGoogle Chart - カラムチャート

Question

私はこのGoogle Chartを役に立たないようにしようとしています。最新の最新のGoogle Chartコードが含まれています。このコードを反応させるのを助けてください。私はjsfiddleを含んでいます。

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

HTMLは、CSSが

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%; 
} 

Javascriptが

である

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

です

// 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

はちょうど方法がどのライブラリから来てどこが明確でなければならないことに加えて、あなたの.html

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

にこれを追加します。 これはコーディングに役立ちます。