javascript - 谷歌图表 : increase margin between x axis labels and x-axis

Question

我正在使用 angular-google-chart ( https://github.com/FERNman/angular-google-charts ) 一个用于 google-chart 的 Angular 包装器来显示柱形图。我想增加 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' 属性，
请参阅以下工作片段...

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);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

注意:bottom 是在 release 43, on Oct. 2, 2015 期间添加的