Question

我已经在动态网页中实现了Google条形图（宽度为100％）但是当我调整浏览器窗口大小时，条形图仍然保持原样。它只会在我刷新浏览器时改变大小。

编辑：这个代码有效 //添加此

<script>
    $(document).ready(function () {

$( window ).resize(function() {
    $("#chart_div").css("width", $("div.cnt").width());
    drawChart();
});
});

</script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Politicus', 'Vragen', 'Beantwoord'],
      ['Bart De Wever',  30,      20,],
      ['Filip De Winter',  25,      10],
      ['Maggie De Block',  20,       15],

    ]);

    var options = {
      title: '',
      legend: {position: 'top' },
      vAxis: {title: 'Aantal',  titleTextStyle: {color: 'red'}},
      orientation: 'horizontal',
    };

    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>

这是我更改浏览器窗口时应该调整大小的div

<div class="cnt"><div id="chart_div" style="width: 100%; height: 400px;"></div>

由于

Answer 1

对于您的问题，请参阅此链接https://groups.google.com/forum/#!msg/google-chart-api/v3HSyEqGaw8/4aH083z4sCIJ

或者一般来说你可以使用调整大小事件
当浏览器窗口的大小发生变化时，resize事件将发送到window元素，因此请使用它示例

$( window ).resize(function() {
  $( "body" ).prepend( "<div>" + $( window ).width() + "</div>" );
});

了解更多信息https://api.jquery.com/resize/

示例http://jsfiddle.net/arjun_chaudhary/y9Rzu/

Google Barchart不会在我的HTML中动态调整大小

1 个答案: