如何获取多数据集柱状图指定索引项对应的X坐标？

获取指定标签对应X坐标的实现方法 #

默认以前端最常用的Chart.js为例，其他柱状图库的核心逻辑通用，都是通过图表实例的内置元数据接口获取对应数据点的坐标：

1. 先定位目标标签的索引

你示例数据里lbl1的索引是1，通用获取方式：

const targetLabel = 'lbl1'
const targetIndex = chartData.labels.indexOf(targetLabel)

2. 获取首个tooltip对应的X坐标

首个tooltip默认对应第一个数据集的同标签数据点，直接读取第一个数据集的元数据即可：

// chart 为你初始化生成的图表实例对象
// 取第一个数据集的元数据，0为数据集索引
const firstDatasetMeta = chart.getDatasetMeta(0)
// 取目标索引对应的数据点
const targetDataPoint = firstDatasetMeta.data[targetIndex]
// X坐标直接取x属性即可
const firstTooltipX = targetDataPoint.x

3. 获取该标签下全部tooltip对应的X坐标

遍历所有数据集取对应索引的X坐标即可：

const allTooltipX = []
// 遍历所有数据集
for (let datasetIdx = 0; datasetIdx < chart.data.datasets.length; datasetIdx++) {
  const datasetMeta = chart.getDatasetMeta(datasetIdx)
  allTooltipX.push(datasetMeta.data[targetIndex].x)
}
// 最终allTooltipX数组内就是该标签对应的所有tooltip X坐标

补充：绘制垂直参考线的简化方案 #

如果你只是要在指定索引位置画垂直参考线，不需要手动计算坐标，直接用Chart.js配套的chartjs-plugin-annotation插件即可，直接指定标签索引就能自动生成参考线，示例配置：

const chartOptions = {
  plugins: {
    annotation: {
      annotations: {
        verticalRefLine: {
          type: 'line',
          xScaleID: 'x',
          x: targetIndex, // 直接填目标标签的索引即可，插件自动计算坐标
          borderColor: '#ff6b6b',
          borderWidth: 2,
        }
      }
    }
  }
}

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