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

Question

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

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

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

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>