Google图表：增加x轴标签和x轴之间的边距

Question

我正在使用 angular-google-chart ( https://github.com/FERNman/angular-google-charts ) 一个 google-chart 的角度包装器来显示柱形图。我想增加 x 轴标签和 x 轴之间的边距。下图中红色部分表示我要增大间隙的地方

根据文档，我添加了以下代码：

options: {
      ...

      hAxis: {
        textStyle: {
          fontSize: 10,
          fontStyle: "Arial",
          marginTop: '10',
          color: '#808080'
        },
   ...

颜色、字体大小和字体样式有效，但无法获取边距间隙。有任何想法吗？提前致谢。

Answer 1

用于chartArea.bottom增加 x 轴上的空间

options: {
      ...
      chartArea: {
        bottom: 60
      },

      hAxis: {
        textStyle: {
          fontSize: 10,
          fontStyle: "Arial",
          marginTop: '10',
          color: '#808080'
        },
   ...  

编辑

尽管您可以bottom增加 x 轴的高度，但
标签仍然与 x 轴的顶部对齐。

但我们可以通过增加属性，在图表'ready'事件上手动将它们向下移动， 请参阅以下工作片段...
'y'

options: {
      ...
      chartArea: {
        bottom: 60
      },

      hAxis: {
        textStyle: {
          fontSize: 10,
          fontStyle: "Arial",
          marginTop: '10',
          color: '#808080'
        },
   ...  

google.charts.load('current', {
  packages: ['controls', 'corechart']
}).then(function () {
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('timeofday', 'Time of Day');
  dataTable.addColumn('number', 'Motivation Level');
  dataTable.addRows([
    [[8, 0, 0], 46],
    [[9, 0, 0], 46],
    [[10, 0, 0], 34],
    [[11, 0, 0], 4],
    [[12, 0, 0], 5],
    [[13, 0, 0], 6],
    [[14, 0, 0], 7],
    [[15, 0, 0], 8],
    [[16, 0, 0], 9],
    [[17, 0, 0], 10],
  ]);

  var options = {
    chartArea: {
      height: '100%',
      width: '100%',
      top: 24,
      left: 60,
      right: 16,
      bottom: 100
    },
    height: '100%',
    width: '100%',

    hAxis: {
      textStyle: {
        fontSize: 10,
        fontStyle: "Arial",
        marginTop: '10',
        color: '#808080'
      }
    }
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.ColumnChart(container);
  google.visualization.events.addListener(chart, 'ready', function () {
    var labels = container.getElementsByTagName('text');
    Array.prototype.forEach.call(labels, function(label) {
      if (label.getAttribute('text-anchor') === 'middle') {
        label.setAttribute('y', parseFloat(label.getAttribute('y')) + 20);
      }
    });
  });
  chart.draw(dataTable, options);
});

注意：在 2015 年 10 月 2 日发布 43bottom期间添加