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

Question

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

谷歌图表是固定的,还是我缺少的覆盖或宽高比选项？

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

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

谢谢!

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>