调整 Google 图表的大小以填充 div 的宽度和高度

Question

刚刚开始使用 Google 图表，我正在尝试创建一个折线图来填充可用空间。似乎图表被锁定在某个纵横比，但无论我将图表和图表 div 元素的高度和宽度属性更改为什么，结果都与我的尺寸不匹配。

谷歌图表是否以这种方式固定，或者是否有我缺少的覆盖或纵横比选项？

你可以在这里找到一个例子：

http://www.walkingcarpet.net/graphs/unemployment-rate/

谢谢！

原文由 Tom 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

除了设置 width 选项，

设置 chartArea.width 以确保图表利用可用空间

另外，调整窗口大小时，需要重新绘制图表

请参阅以下工作片段…

 google.charts.load('current', {
  callback: function () {
    drawChart();
    $(window).resize(drawChart);
  },
  packages:['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y'],
    [0, 0],
    [1, 1],
    [2, 3],
    [3, 7],
    [4, 15],
    [5, 31]
  ]);

  var options = {
    chartArea: {
      // leave room for y-axis labels
      width: '94%'
    },
    legend: {
      position: 'top'
    },
    width: '100%'
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.LineChart(container);
  chart.draw(data, options);
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

---

编辑

其中， chartArea 也有一个属性 left

而不是使用 chartArea.width: '94%'

尝试设置一个绝对值 left

请参阅以下工作片段…

 google.charts.load('current', {
  callback: function () {
    drawChart();
    $(window).resize(drawChart);
  },
  packages:['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y'],
    [0, 0],
    [1, 1],
    [2, 3],
    [3, 7],
    [4, 15],
    [5, 31]
  ]);

  var options = {
    chartArea: {
      left: 40,
      width: '100%'
    },
    legend: {
      position: 'top'
    },
    width: '100%'
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.LineChart(container);
  chart.draw(data, options);
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

原文由 WhiteHat 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

此 CodePen 展示了一个使 Google Charts 响应的示例。具体来说，图表在 resize 重新绘制：

 $(window).resize(function(){
  drawChart1();
  drawChart2();
});

原文由 Ouroborus 发布，翻译遵循 CC BY-SA 3.0 许可协议