求助：如何在Google图表中添加非条形高度计算的目标达成数值标签？

要实现截图中每个条形右侧显示独立于条形高度的“目标达成XX”标签，可通过以下步骤修改代码：

关键调整点 #

• 在数据表格中新增目标值列和专用注释列，注释列明确标注放置位置为条形外侧
• 配置注释文本的样式，确保显示在正确位置
• 隐藏无关的辅助系列，避免干扰图表展示

修改后的完整代码 #

google.load("visualization", "1", {packages: ["corechart"]});
google.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Value');
  // 新增目标值列（用于定位注释，后续设置为隐藏）
  data.addColumn('number', '目标值');
  // 新增专用注释列，指定放置在外侧
  data.addColumn({type: 'string', role: 'annotation', p: {placement: 'outside'}});

  data.addRows([
    ['Foo', 53, 100, '目标达成 95'],
    ['Bar', 71, 100, '目标达成 88'],
    ['Baz', 36, 100, '目标达成 72'],
    ['Cad', 42, 100, '目标达成 65'],
    ['Qud', 87, 100, '目标达成 90'],
    ['Pif', 64, 100, '目标达成 78']
  ]);

  var view = new google.visualization.DataView(data);
  // 列配置：名称、条形值、目标值（用于定位注释）、注释文本
  view.setColumns([0, 1, 2, 3]);

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

  chart.draw(view, {
    height: 400,
    width: 600,
    series: {
      0: {type: 'bars'},
      // 将目标值系列设置为隐藏，仅用于定位注释
      1: {type: 'line', color: 'transparent', lineWidth: 0, pointSize: 0, visibleInLegend: false}
    },
    vAxis: {maxValue: 100},
    // 配置注释文本样式
    annotations: {
      textStyle: {
        fontSize: 12,
        color: '#333'
      }
    }
  });
}

效果说明 #

• 注释文本“目标达成XX”会固定显示在对应条形的右侧外侧位置，不受条形高度影响
• 目标值列设置为100（与vAxis最大值一致），确保注释始终对齐到图表右侧区域
• 隐藏目标值对应的线系列，避免对图表视觉效果造成干扰

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