Question

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

我从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>

我还尝试添加width =＆＃34; 100％＆＃34;来自div，但它根本不起作用。

Answer 1

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

从之前的网络探索中，我找到并实施的最佳解决方案是：

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

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

为了允许.resize()函数，您将需要jQuery库。有关此内容的更多信息，请访问here。

谷歌列图表使其响应

1 个答案: