使用style:'line'时，能否将Google Chart柱状图注释统一移至底部？

当然可以实现这个需求！当你把annotations.style设为'line'时，我们可以通过调整图表生成后的DOM元素位置，把所有注释统一移到图表底部的同一静态位置。下面是修改后的完整代码，以及关键调整点的说明：

google.charts.load('current', { callback: function () { drawChart(); window.addEventListener('resize', drawChart, false); }, packages:['corechart'] }); 
function drawChart() { 
  var data = google.visualization.arrayToDataTable([ 
    ['Type', 'Completed', 'Outstanding'], 
    ['', 75, 25], 
    ['', 50, 40], 
    ['', 80, 15] 
  ]); 
  var view = new google.visualization.DataView(data); 
  view.setColumns([0, 1, { calc: "stringify", sourceColumn: 1, type: "string", role: "annotation" }, 2, { calc: "stringify", sourceColumn: 2, type: "string", role: "annotation" }]); 
  var options = { 
    legend: 'none', 
    height: 270, 
    chartArea: { 'width': '80%', 'height': '80%' }, 
    bar: { groupWidth: '80%' }, 
    annotations: { 
      style: 'line', 
      textStyle: { fontSize: 8, color: 'black', strokeSize: 0, auraColor: 'transparent' }, 
      alwaysOutside: true, 
      stem:{ color: 'transparent' }, 
    }, 
    vAxis: { textPosition: 'none', gridlines: { color: 'transparent' } }, 
    series: { 0: { color: '#00A887' }, 1: { color: '#F6323E' } } 
  }; 
  var container = document.getElementById('northPMChart'); 
  var chart = new google.visualization.ColumnChart(container); 
  // 调整注释位置的核心逻辑
  var observer = new MutationObserver(function () { 
    var chartLayout = chart.getChartLayoutInterface();
    // 获取图表区域的底部边界坐标
    var bottomY = chartLayout.getChartAreaBoundingBox().bottom;
    // 获取注释文本的字体大小，用于垂直居中调整
    var fontSize = parseInt(options.annotations.textStyle.fontSize);
    
    // 遍历所有文本元素，筛选出注释并调整位置
    Array.prototype.forEach.call(container.getElementsByTagName('text'), function(annotation) {
      // 准确识别注释文本：匹配text-anchor为middle（注释默认居中）和我们设置的文本颜色
      if (annotation.getAttribute('text-anchor') === 'middle' && annotation.getAttribute('fill') === options.annotations.textStyle.color) {
        // 设置y坐标，让文本垂直居中显示在图表底部
        annotation.setAttribute('y', bottomY + fontSize / 2);
        
        // 如果你希望所有注释都在同一水平位置（比如图表中心），可以取消下面这行注释
        // annotation.setAttribute('x', chartLayout.getChartAreaBoundingBox().left + chartLayout.getChartAreaBoundingBox().width / 2);
      }
    }); 
  }); 
  observer.observe(container, { childList: true, subtree: true }); 
  chart.draw(view, options); 
}

关键调整说明： #

• 修正注释元素的判断逻辑：原代码里判断fill === '#ffffff'是错误的（我们设置的注释文本颜色是黑色），改成匹配options里定义的文本颜色，确保只选中注释文本元素。
• 精准计算底部位置：用chartLayout.getChartAreaBoundingBox().bottom获取图表区域的底部边界，再加上字体大小的一半，让注释文本刚好垂直居中显示在底部。
• 可选的水平位置统一：如果需要所有注释都集中在同一水平位置（比如图表正中心），可以取消代码里x坐标设置的注释，把所有注释移到指定水平位置。

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