반응 형 Google 차트 - 기둥 형 차트

Question

나는이 Google 차트를 무의미하게 만들려고 노력하고 있습니다. 여기에는 가장 최신의 최신 Google Chart 코드가 포함되어 있습니다. 이 코드가 반응하도록 도와주세요. 나는 jsfiddle를 포함시켰다. 자바 스크립트는

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

인 CSS는

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

됩니다

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

html로입니다

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

이를 추가 할 수 있습니다. 코딩에 도움이됩니다.