ChartJS标注拖动后如何获取数据集的x坐标值？

直接用ChartJS内置的轴方法就能把canvas像素坐标转成数据坐标，步骤如下：

• 确保你能访问到初始化后的Chart实例（比如命名为myChart）
• 在标注的onDragEnd回调里，拿到标注的像素x坐标，再调用x轴的getValueForPixel()方法转换

代码示例 #

// 初始化图表
const myChart = new Chart(document.getElementById('myChart'), {
  type: 'line',
  data: {
    labels: ['1月', '2月', '3月', '4月', '5月'],
    datasets: [{
      label: '销量',
      data: [12, 19, 3, 5, 2]
    }]
  },
  options: {
    plugins: {
      annotation: {
        annotations: {
          myLine: {
            type: 'line',
            xMin: 2,
            xMax: 2,
            borderColor: '#ff0000',
            borderWidth: 2,
            draggable: true,
            // 拖动结束时的回调
            onDragEnd: function(e, annotation) {
              // 获取标注的像素x坐标（不同标注类型可能取annotation.x/annotation.x1，按需调整）
              const pixelX = annotation.x;
              // 转换为数据集对应的x值
              const dataXValue = myChart.scales.x.getValueForPixel(pixelX);
              console.log('拖动后对应的数据集x值:', dataXValue);
            }
          }
        }
      }
    }
  }
});

注意事项 #

• 如果你的x轴是时间轴、对数轴等特殊类型，getValueForPixel()方法同样适用，会自动返回对应格式的数值（比如时间对象）
• 不同类型的标注（比如矩形box），像素坐标的属性可能不同，比如矩形用x1或x2，根据实际标注类型调整

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