google 柱形图使其响应

Question

美好的一天，我有一个 google 柱形图并且工作得很好，但是当我调整浏览器大小时，柱形图溢出并且不会重新调整大小。我的网站响应迅速，我不想那样放置条形图。如何让我的柱形图响应？

我从 developers.google 得到了这个柱形图。com/chart/interactive/docs/gallery/columnchart

这是代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title><?php echo $title;?></title>
    <!-- Load Google chart api -->

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
            google.charts.load('current', {'packages':['bar']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
      var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses', 'Profit'],
      ['2014', 1000, 400, 200],
      ['2015', 1170, 460, 250],
      ['2016', 660, 1120, 300],
      ['2017', 1030, 540, 350]
    ]);
    var options = {
      chart: {
        title: 'Company Performance',
        subtitle: 'Sales, Expenses, and Profit: 2014-2017',
      },
      bars: 'vertical',
      vAxis: {format: 'decimal'},
      height: 400,
      colors: ['#1b9e77', '#d95f02', '#7570b3']
    };

    var chart = new google.charts.Bar(document.getElementById('chart_div'));

    chart.draw(data, google.charts.Bar.convertOptions(options));

    var btns = document.getElementById('btn-group');

    btns.onclick = function (e) {

      if (e.target.tagName === 'BUTTON') {
        options.vAxis.format = e.target.id === 'none' ? '' : e.target.id;
        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    }
  }
    </script>
 </head>
 <body>        

   <div id="chart_div" style="width:100%;"></div>
 <br/>
<div id="btn-group">
  <button class="button button-blue" id="none">No Format</button>
  <button class="button button-blue" id="scientific">Scientific Notation</button>
  <button class="button button-blue" id="decimal">Decimal</button>
  <button class="button button-blue" id="short">Short</button>
 </div>
 </body>
 </html>

我也尝试从 div 添加 width="100%" 但它根本不起作用。

Answer 1

目前，Google 图表的问题在于它没有响应功能。

根据之前在网络上的探索，我找到并实施的最佳解决方案是：

$(window).resize(function () {
    drawChart();
});

每次调整浏览器 window 大小时，这段代码都会调用 drawChart() 函数。因此，这意味着每次都会重新绘制图表。这可能不是最好或最有效的解决方案，但对我来说它完成了工作。

为了启用 .resize() 功能，您需要 jQuery 库。有关此的更多信息，请参阅 here。

google 柱形图使其响应

google column chart make it responisve

charts

column-chart