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

Question

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

      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 的回答，因为它直接解决了我原来的问题。但是，解决我原来的问题会在底部引入 - 或者揭示 - 另一个垂直间距问题。看看这个非常高的图表（高图表很有意义，例如对于具有许多独立值的条形图）。 'spacing' 上下到横轴标题大的没必要：

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/>

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

根本不使用标题（也省略 space）
在底部使用合理的水平轴标签（使用标签的原始尺寸）
将所有剩余的 space 用于图表本身。

不知道有没有可能。

Answer 1

您可以在 options 中提供 chartArea 配置，它采用图表的高度和宽度。通过使用它，您的图表视图将使用额外的间距。参考下面的代码或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/>

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

how to collapse title area in a google chart

google-visualization