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>

Answer 2

This CodePen显示了使Google图表响应的示例。具体来说，图表在resize上重新绘制：

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

Answer 3

在类似情况下着陆，其中图的可用高度（在边界容器中）似乎没有得到充分利用。

https://developers.google.com/chart/interactive/docs/gallery/linechart虽然包含一些指针。查看vAxis.viewWindowMode，vAxis.viewWindow.max和vAxis.viewWindow.min属性，尤其是“最大化”的viewWindowMode：

指定如何缩放垂直轴以在图表区域内呈现值。支持以下字符串值：[...]
“最大化”-缩放垂直值，以便最大和最小数据值触及图表区域的顶部和底部。这将导致vaxis.viewWindow.min和vaxis.viewWindow.max被忽略。“ [...] \

如果您不使用viewWindow，还应该查看vAxis.ticks属性，因为“ viewWindow将自动扩展为包含min和除非您指定要覆盖的max或viewWindow.min，否则viewWindow.max会打勾。”

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

3 个答案: