Google图表-响应问题-动态调整大小 [英] Google Charts - Responsive Issue - Dynamically Resize

问题描述

我正在尝试使我的Google列材料图表响应，但对我来说似乎有点断断续续，而且一点也不奏效.谁能帮我使这一切顺利

I am trying to make my Google Column Material Chart responsive, but it seems a bit choppy to me and doesnt work well at all. Can anyone help me make this flow well

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

The chart will only appear in that format when the page is loaded. It won’t dynamically resize when the browser window width is changed.

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

推荐答案

在小提琴中，您正在使用JQuery来监听窗口调整大小...

in the fiddle, you are using JQuery to listen for window resize...

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

但是，不包含JQuery ...

however, JQuery is not included...

改用 addEventListener ，或包含对JQuery的引用，
参见以下工作片段...

use addEventListener instead, or include a reference to JQuery,
see following working snippet...

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>

这篇关于Google图表-响应问题-动态调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！