Question

看看这个简单的谷歌图表。我想去掉 hr 标签和图表上部之间不必要的填充空间。（我猜是标题，但我没有使用标题。）

      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2013',  1000,      400],
          ['2014',  1170,      460],
          ['2015',  660,       1120],
          ['2016',  1030,      540]
        ]);

        var options = {
        titleTextStyle : {
            fontSize:1
        },
          title: null,
          hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
          vAxis: {minValue: 0}
        };

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

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<hr/>
<div id="chart_div" style="width: 100%; height: 500px;"></div>
<hr/>

编辑

我接受了 wahab memon 的回答，因为它直接解决了我最初的问题。然而，解决我最初的问题会引入——或者揭示——底部的另一个垂直间距问题。看看这个非常高的图（高图是有意义的，例如对于具有许多独立值的条形图）。水平轴标题上下的“间距”不必要地大：

google.charts.load('current', {
  'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses'],
    ['2013', 1000, 400],
    ['2014', 1170, 460],
    ['2015', 660, 1120],
    ['2016', 1030, 540]
  ]);

  var options = {
    chartArea: {
      width: '80%',
      height: '80%',
      top: 10
    },
    title: null,
    hAxis: {
      title: 'Year',
      titleTextStyle: {
        color: '#333'
      }
    },
    vAxis: {
      minValue: 0
    }
  };

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

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<hr/>
<div id="chart_div" style="width: 100%; height: 1200px;"></div>
<hr/>

应该有一种方法告诉图表应用这些规则：

完全不要使用标题（也省略空格）
在底部使用合理的水平轴标签（使用标签的原始尺寸）
将所有剩余空间用于图形本身。

我想知道是否有可能。

Answer 1

您可以在 chartArea 中提供 options 配置，以获取图表的高度和宽度。通过使用它，您的图表视图将使用额外的间距。请参阅以下代码或fiddle：

google.charts.load('current', {
  'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses'],
    ['2013', 1000, 400],
    ['2014', 1170, 460],
    ['2015', 660, 1120],
    ['2016', 1030, 540]
  ]);

  var options = {
    titleTextStyle: {
      fontSize: 1
    },
    chartArea: {
      width: '80%',
      height: '80%',
      top: 10
    },
    title: null,
    hAxis: {
      title: 'Year',
      titleTextStyle: {
        color: '#333'
      }
    },
    vAxis: {
      minValue: 0
    }
  };

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

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<hr/>
<div id="chart_div" style="width: 100%; height: 500px;"></div>
<hr/>

如何折叠谷歌图表中的标题区域

1 个答案: