如何在谷歌折线图中的标签和水平轴之间添加空格

Question

已添加带有以下选项的谷歌图表，我想要水平轴和实际轴上的标签之间的间距，图表库中是否有可用选项或任何其他方式？

var options = { colors: ['#4ED8DA'], curveType: 'none', fontName: 'Montserrat', chartArea: {left: 40, top: 10, bottom: 30, width: '95%', height: '100%'}, legend: {position: 'none'}, pointSize: 5, lineWidth: 3, hAxis: {textPosition: 'out', minTextLines: '2', slantedText: false, baselineColor: '#D6D6D6', gridlines: {color: '#D6D6D6'}, textStyle: {color: '#383939', fontSize: '12', bold: true}}, vAxis: {baselineColor: '#D6D6D6', gridlines: {color: '#D6D6D6', interval: 1}, textStyle: {color: '#383939', fontSize: '12'}} };

Answer 1

没有标准的配置选项可以在 x 轴标签和轴之间创建空间。

但是，您可以手动移动图表的'ready' 事件上的标签。

首先，我们找到x轴标签，然后增加标签的"y"属性。
以下示例将与轴的距离增加字体大小的值。

google.visualization.events.addListener(chart, 'ready', function () {
  // get all chart labels
  var labels = chart.getContainer().getElementsByTagName('text');
  Array.prototype.forEach.call(labels, function (label) {
    // determine if x-axis label
    if (label.getAttribute('text-anchor') === 'middle') {
      // increase distance from axis by the font size of the label
      var fontSize = parseFloat(label.getAttribute('font-size'));
      var yCoord = parseFloat(label.getAttribute('y'));
      label.setAttribute('y', yCoord + fontSize);
    }
  });
});

注意：取决于您移动标签的距离，
您可能需要增加图表底部的区域。

chartArea.bottom

请参阅以下工作 sn-p...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y0'],
    [0, 0],
    [1, 0],
    [2, 0],
    [3, 1],
    [4, 1],
    [5, 2],
    [6, 2],
    [7, 3],
    [8, 3],
    [9, 3]
  ]);

  var options = {
    colors: ['#4ED8DA'],
    curveType: 'none',
    fontName: 'Montserrat',
    chartArea: {left: 40, top: 10, bottom: 30, width: '95%', height: '100%'},
    legend: {position: 'none'},
    pointSize: 5,
    lineWidth: 3,
    hAxis: {textPosition: 'out', minTextLines: '2', slantedText: false, baselineColor: '#D6D6D6', gridlines: {color: '#D6D6D6'}, textStyle: {color: '#383939', fontSize: '12', bold: true}},
    vAxis: {baselineColor: '#D6D6D6', gridlines: {color: '#D6D6D6', interval: 1}, textStyle: {color: '#383939', fontSize: '12'}}
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart'));

  google.visualization.events.addListener(chart, 'ready', function () {
    var labels = chart.getContainer().getElementsByTagName('text');
    Array.prototype.forEach.call(labels, function (label) {
      if (label.getAttribute('text-anchor') === 'middle') {
        var fontSize = parseFloat(label.getAttribute('font-size'));
        var yCoord = parseFloat(label.getAttribute('y'));
        label.setAttribute('y', yCoord + fontSize);
      }
    });
  });

  chart.draw(data, options);
});

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