Google Charts：为hAxis设置填充

Question

除了hAxis标签在图表本身和图例之间的填充很少或没有填充之外，我的图表工作正常。有没有办法增加它？

选项：

var options = {
          colors:['rgb(32, 170, 188)', 'rgb(32, 188, 77)'],
          lineWidth:4,
          areaOpacity: 0.15,
          width:$(window).width() * 0.5,
          height:$(window).width() * 0.25,
          animation: {
               "startup": true,
               duration: 1200,
               easing: 'out',
          },
          fontName: 'Open Sans',
          legend: {
            position:'bottom',
          },
          chartArea:{
            width:'90%',
            height:'80%',
          }
        };

Answer 1

我能想到的唯一选择是，一旦图表为'ready'，就修改标签 或在'animationfinish'

在此示例中，y位置增加4

看起来像动画一样 jumpy ，
如果你知道svg

，可能还有其他选择

＆＃13;

＆＃13;

google.charts.load('current', {
  'callback': function () {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['2013',  1000,      400],
      ['2014',  1170,      460],
      ['2015',  660,       1120],
      ['2016',  1030,      540]
    ]);

    var options = {
      colors:['rgb(32, 170, 188)', 'rgb(32, 188, 77)'],
      lineWidth:4,
      animation: {
        startup: true,
        duration: 1200,
        easing: 'out',
      },
      areaOpacity: 0.15,
      fontName: 'Open Sans',
      legend: {
        position:'bottom',
      },
      chartArea:{
      }
    };

    var container = document.getElementById('chart_div');
    var chart = new google.visualization.AreaChart(container);
    google.visualization.events.addListener(chart, 'animationfinish', moveLabels);
    google.visualization.events.addListener(chart, 'ready', moveLabels);

    function moveLabels() {
      Array.prototype.forEach.call(container.getElementsByTagName('text'), function (label) {
        if (label.getAttribute('text-anchor') === 'middle') {
          label.setAttribute('y', parseFloat(label.getAttribute('y')) + 4);
        }
      });
    }

    chart.draw(data, options);
  },
  'packages':['corechart']
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;