如何调整Google折线图hAxis标题与坐标轴的间距（固定chartArea.height）

背景说明 #

此代码基于Google Charts文档中的「Multiple line types」示例修改而来，修改后的options配置如下：

var options = {
  width: 1000, height: 850, 
  chartArea: {left:75, top:75, height:450, width:550},
  hAxis: {
    title: 'Time'
  },
  vAxis: {
    title: 'Popularity'
  },
  series: {
    1: {curveType: 'function'}
  }
};

效果展示 #

如图所示，X轴标题「Time」与坐标轴间距过大，在必须保持chartArea.height固定值的前提下，如何拉近该标题与坐标轴的距离？

解决方法 #

你可以给hAxis添加titleTextStyle配置，用bottom属性调整X轴标题的垂直位置，不用改动固定的chartArea.height，就能直接拉近标题和坐标轴的距离。修改后的配置代码如下：

var options = {
  width: 1000, height: 850, 
  chartArea: {left:75, top:75, height:450, width:550},
  hAxis: {
    title: 'Time',
    // 新增标题样式配置，调整bottom值控制间距，数值越小标题越靠近坐标轴
    titleTextStyle: {
      bottom: 10 // 可根据实际效果调整这个数值
    }
  },
  vAxis: {
    title: 'Popularity'
  },
  series: {
    1: {curveType: 'function'}
  }
};

这种方式直接精准控制标题位置，完全满足保持chartArea.height固定的要求。

内容的提问来源于stack exchange，提问作者vkkodali