响应式谷歌图表 - 柱形图答案

【问题标题】：Responsive Google Chart - Column Chart响应式谷歌图表 - 柱形图
【发布时间】：2017-05-11 21:32:51
【问题描述】：

我试图让这个谷歌图表响应无济于事。它包含最新和最新的谷歌图表代码。请帮助我使此代码具有响应性。我已经包含了一个 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();
     });
   });
  }

【问题讨论】：

所以在重新调整大小时，您希望图表与容器一起缩放，而不是正确截断？
你忘记加载 jQuery...

标签： javascript jquery html google-visualization responsive

【解决方案1】：

只需将其添加到您的 .html 中

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

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

【讨论】：

感谢 Doggy - 忘记添加 jquery 的链接