关于Google Area Chart的标签挂载及标签与数据点间距调整的技术问询

Google Area Chart提供了灵活的配置项，能轻松调整标签和数据点的间距，具体分两种场景处理：

1. 直接显示在图表上的数据标注（Annotations） #

如果是固定显示在数据点旁的标注，你可以通过annotations配置项里的参数精确控制距离：

• annotations.stem.length：控制标注和数据点之间连线的长度，数值越大，标签离数据点越远
• annotations.position：可选above/below/in，改变标签相对数据点的位置，间接调整距离感
• 配合annotations.textStyle可以微调标签本身的样式，避免视觉拥挤

举个实际代码例子：

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', { role: 'annotation' }],
    ['2018', 1000, '1k'],
    ['2019', 1170, '1.17k'],
    ['2020', 660, '660'],
    ['2021', 1030, '1.03k']
  ]);

  var options = {
    title: 'Company Sales Trend',
    areaOpacity: 0.4,
    annotations: {
      stem: {
        length: 20 // 把连线长度设为20px，标签会离数据点更远
      },
      textStyle: {
        fontSize: 12,
        color: '#2c3e50'
      },
      position: 'above' // 标签显示在数据点上方，也可以选'below'放在下方
    }
  };

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

2. 悬停时显示的工具提示（Tooltip） #

如果是鼠标悬停才出现的标签，你可以通过自定义HTML样式来调整它和数据点的距离：

• 开启tooltip.isHtml: true，然后用HTML模板的内边距（padding）、外边距（margin）来控制间距
• 也可以通过tooltip.textStyle调整字体大小，间接优化视觉距离

示例代码：

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales'],
    ['2018', 1000],
    ['2019', 1170],
    ['2020', 660],
    ['2021', 1030]
  ]);

  var options = {
    title: 'Company Sales Trend',
    areaOpacity: 0.4,
    tooltip: {
      isHtml: true,
      // 自定义HTML模板，通过padding调整工具提示和数据点的距离
      formatter: function(context) {
        return '<div style="padding: 10px 15px; border-radius: 4px;">' +
               '<strong>' + context.rowLabel + '</strong><br>' +
               'Sales: ' + context.value + '</div>';
      }
    }
  };

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

小提示：如果标注位置设为in（在数据点内部），stem.length会失效，这时候可以通过annotations.textStyle.color调整文字颜色，避免和数据点重叠，或者微调字体大小来优化视觉效果。

内容的提问来源于stack exchange，提问作者BrianPando