繁体   English   中英

Google图表 - 响应问题 - 动态调整大小

[英]Google Charts - Responsive Issue - Dynamically Resize

我正在尝试使我的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();
    });

在小提琴中,你正在使用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> 

像这个例子一样,将宽度从80%更改为100%:

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM