Google Charts - 响应式问题 - 动态调整大小

Question

我正在尝试使我的Google Column Material Chart响应式，但它对我来说似乎有点不连贯，并且根本无法正常工作。有人可以帮助我使其流畅吗？

当页面加载时，该图表仅以该格式显示。当浏览器窗口宽度更改时，它不会动态调整大小。

JSFIDDLE https://jsfiddle.net/rbla/Le8g0sw0/8/ HTML

<div id="chart">
    <div id="chart_div"></div>
</div>

CSS

#chart {
   border:5px solid #AAA;
   width: 80%; 
   min-height: 450px;
}

JS

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

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script>

  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));



  }

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

- Ronald

---

我已经将宽度更改为100％，但是当我调整大小时它不会重新流动 - 在运行时正常工作，但是不适用于调整大小。 - Ronald

Answer 1

在这个范例中，你使用了jQuery来监听窗口大小的变化...

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

然而，JQuery没有被包含在内...

使用addEventListener代替，或者包含对JQuery的引用，
参见以下可工作的代码片段...

google.charts.load('current', {
  packages: ['bar']
}).then(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));
  window.addEventListener('resize', drawChart, false);
}

#chart {
  border: 5px solid #AAA;
  min-height: 450px;
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart">
  <div id="chart_div"></div>
</div>

- WhiteHat

Answer 2

将宽度从80%修改为100%，就像这个示例一样：

#chart {
    border: 5px solid #AAA;
    width: 100%;
    min-height: 450px;
}

- Thilina Dharmasena