Question

我正在尝试使此Google图表无效。它包含最新和最新的Google Chart代码。请帮助我使此代码响应。我已经加入了一个jsfiddle。

HTML

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

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

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

此外，您必须清楚方法来自哪个库。它有助于您的编码。

响应式Google图表 - 柱形图

1 个答案: