如何在Vue Chartkick的Google Chart柱状图中添加Annotation

Vue Chartkick 支持通过:library属性透传Google Charts原生配置，无需修改组件源码即可实现标注展示，以下是两种常用场景的实现方式：

场景1：柱顶自动显示对应数值标注 #

不需要修改原有数据结构，只需要给组件追加配置属性即可。

1. 修改组件代码，绑定library配置：

<column-chart
  :data="data"
  legend="bottom"
  adapter="google"
  :library="chartOptions"
>
</column-chart>

2. 在组件的响应式数据中定义chartOptions配置项：

data() {
  return {
    // 原有数据保持不变
    data: [
      {
        name: "Sales",
        data: {
          2021: 100,
          2020: 80,
          2019: 60,
          2018: 50,
        },
      },
    ],
    // 新增Google原生图表配置
    chartOptions: {
      annotations: {
        textStyle: {
          fontSize: 12,
          color: '#333',
          bold: true
        },
        alwaysOutside: true, // 强制标注显示在柱子外侧，避免被柱体遮挡
        stem: {
          color: 'transparent' // 隐藏标注与柱子之间的连接线，不需要可删除该配置
        }
      },
      series: {
        0: { // 索引对应数据系列的顺序，0代表第一个Sales系列
          annotations: {
            source: 'value' // 自动读取数据点的数值作为标注文本
          }
        }
      }
    }
  }
}

场景2：自定义每个柱子的标注文本 #

如果需要给柱子添加自定义说明文本（比如特殊节点标记、同比说明等），需要小幅调整数据结构，配合配置实现：

1. 调整原有数据格式，将对象格式的系列数据改为数组结构，每个数据点携带自定义标注内容：

data: [
  {
    name: "Sales",
    // 数组每一项格式：[x轴分类值, 柱体数值, 标注文本]
    data: [
      ["2021", 100, "历史最高"],
      ["2020", 80, "同比+33%"],
      ["2019", 60, ""], // 不需要标注的项传空字符串即可
      ["2018", 50, "基准值"]
    ],
  },
],

2. 配置chartOptions开启标注渲染：

chartOptions: {
  annotations: {
    textStyle: {
      fontSize: 12,
      color: '#e53935'
    },
    alwaysOutside: true
  }
}

说明：:library属性传递的所有配置会直接透传给Google Charts的ColumnChart实例，所有官方支持的标注配置（比如标注位置、样式、交互态）都可以通过该属性传入，无需额外封装。

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