调整Google Chart带负值的Column Chart（柱状图）注释位置

我懂你遇到的困扰——把Bar Chart的注释调整逻辑改成Column Chart时没成功，这是因为两种图表的布局计算逻辑完全不同：Bar Chart是横向布局，而Column Chart是纵向的，定位元素的方式得跟着换。

下面是修改后的完整代码，我重新调整了注释定位的逻辑，现在负数的注释会精准显示在对应蓝色柱子的下方：

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable({
cols: [
{ label: 'x', type: 'string' },
{ label: 'y0', type: 'number' },
],
rows: [
{ c: [{ v: 'Omega' }, { v: -0.95 }] },
{ c: [{ v: 'Large' }, { v: -1.92 }] },
{ c: [{ v: 'Medium' }, { v: 2.76 }] },
{ c: [{ v: 'Tiny' }, { v: 2.03 }] }
]
});
var options = {
annotations: {
alwaysOutside: true,
stem: { color: 'transparent' },
textStyle: { color: '#000000' }
},
vAxis: {
viewWindow: {
min: data.getColumnRange(1).min - 3
}
},
legend: { position: 'none' }
};
var view = new google.visualization.DataView(data);
view.setColumns([
0,
1,
{ calc: 'stringify', sourceColumn: 1, type: 'string', role: 'annotation' }
]);
var container = document.getElementById('chart');
var chart = new google.visualization.ColumnChart(container);

// 调整注释位置的核心逻辑
var observer = new MutationObserver(function () {
  var chartLayout = chart.getChartLayoutInterface();
  // 精准定位注释文本，排除tooltip的加粗文本
  $.each($('text[role="annotation"]:not([font-weight="bold"])'), function (index, label) {
    var labelValue = parseFloat($(label).text());
    if (labelValue < 0) {
      // 获取对应柱子的边界框信息（bar#0#index：0是系列索引，index是行索引）
      var barBounds = chartLayout.getBoundingBox('bar#0#' + index);
      if (barBounds) {
        var labelBounds = label.getBBox();
        // 将注释定位到柱子底部下方，居中对齐
        $(label).attr({
          'y': barBounds.top + barBounds.height + labelBounds.height + 8,
          'x': barBounds.left + (barBounds.width / 2),
          'text-anchor': 'middle'
        });
      }
    }
  });
});

observer.observe(container, { childList: true, subtree: true });
chart.draw(view, options);
},
packages: ['corechart']
});
</script>
</head>
<body>
<div id="chart" style="width: 500px; height: 300px;"></div>
</body>

关键修改点说明： #

• 精准选择注释元素：用text[role="annotation"]:not([font-weight="bold"])定位，避免误选图表中的其他文本（比如tooltip）。
• 基于柱子实际位置定位：通过chartLayout.getBoundingBox('bar#0#' + index)获取每个柱子的边界框，能准确拿到柱子的底部坐标，这比直接用数值计算位置更可靠。
• 优化注释对齐方式：把注释的text-anchor设为middle，x轴定位到柱子中心，确保注释在柱子正下方居中显示，视觉效果更统一。

这样修改后，-0.95和-1.92的注释都会乖乖待在对应蓝色柱子的下方，完美适配Column Chart的纵向布局。

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