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

Question

我正在使用angular-google-chart（ https://github.com/FERNman/angular-google-charts ）谷歌图表的角度包装来显示柱形图。 我想增加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> 

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