javascript - Google Charts - Responsive Issue - Dynamically Resize - Stack Overflow

admin管理员组

文章数量:1356304

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 /

HTML

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

CSS

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

JS

<script src=".2.1/jquery.min.js"></script>

<script type="text/javascript" src=".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();
    });

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/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./ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script type="text/javascript" src="https://www.gstatic./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();
    });

• javascript
• html
• responsive
• google-visualization

Share Improve this question Follow edited Nov 16, 2017 at 17:15 Ronald asked Nov 16, 2017 at 16:02 RonaldRonald 55722 gold badges1010 silver badges2828 bronze badges 1

• I have changed the width to 100% - but it doesnt reflow when I resize it - works fine when I RUN this, but not when I resize – Ronald Commented Nov 16, 2017 at 16:52

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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

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

however, JQuery is not included...

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./charts/loader.js"></script>
<div id="chart">
  <div id="chart_div"></div>
</div>

Change the width from 80% to 100% like this example:

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

本文标签： javascriptGoogle ChartsResponsive IssueDynamically ResizeStack Overflow