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'属性，
参见以下工作片段...

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期间添加的

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

1 个答案: