javascript - 如何使用google api减少折线图中haxis和注释值之间的差距

Question

我正在使用 google api 创建折线图。我想减少 haxis 线和注释值标签之间的差距。我将展示实际图像。

    var data = new google.visualization.DataTable();
                    data.addColumn('string', '');
                    data.addColumn({type: 'string', role: 'annotation'});
                    data.addColumn('number', '');
                    data.addColumn({type: 'string', role: 'annotation'});

     data.addRows([['2014', '20%', 63569, '63569']]);
     data.addRows([['2014', '20%', 62034, '62034']]);
     data.addRows([['2014', '19%', 60605, '60605']]);
     data.addRows([['2014', '19%', 60605, '60605']]);


    var chart = new google.visualization.LineChart(document.getElementById('chart_div));
                    chart.draw(data, options);

Answer 1

你可以使用选项 --> annotations.stem.length

将length设置为0以减少差距

annotations: {
  stem: {
    length: 0
  }
}

调整 series 选项以调整 y 轴注释

请参阅以下工作片段...

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', '');
  data.addColumn({type: 'string', role: 'annotation'});
  data.addColumn('number', '');
  data.addColumn({type: 'string', role: 'annotation'});
  data.addRows([['2014', '20%', 63569, '63569']]);
  data.addRows([['2015', '20%', 62034, '62034']]);
  data.addRows([['2016', '19%', 60605, '60605']]);
  data.addRows([['2017', '19%', 57467, '57467']]);

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, {
    annotations: {
      stem: {
        length: 0
      },
      textStyle: {
        bold: true,
        color: '#000000'
      }
    },
    backgroundColor: '#fbe9e7',
    colors: ['#ffc107'],
    legend: 'none',
    pointSize: 8,
    series: {
      0: {
        annotations: {
          stem: {
            color: 'transparent',
            length: 12
          }
        }
      }
    },
    vAxis: {
      gridlines: {
        count: 0
      }
    }
  });
}

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