0

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

我从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%" 但它根本不起作用。

4

1 回答 1

0

目前，谷歌图表的问题是它没有响应功能。

根据之前对网络的探索，我发现并实施的最佳解决方案是：

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

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

为了允许该.resize()功能，您将需要 jQuery 库。更多信息可在此处获得。

于 2016-06-16T12:52:56.773 回答