Chart.js柱状图点击时获取Y轴标签值的技术咨询

嘿，我懂你的需求——点击柱子时直接拿到它对应的Y轴数值，比如2月蓝色柱子的40对吧？之前你用的代码拿到的是数据集的标签（比如系列名称），这当然不是你要的结果，我来给你调整一下：

核心思路 #

你需要通过点击事件返回的活动元素，定位到图表数据里的对应数值，而不是去访问内部的_model.datasetLabel（那是数据集的名字）。

适用于Chart.js 2.x版本的代码 #

onClick: function(evt, elements) {
  // 确保确实点击到了柱子元素
  if (elements.length > 0) {
    const activePoint = elements[0];
    // 获取数据集索引和数据点的索引
    const datasetIndex = activePoint.datasetIndex;
    const dataIndex = activePoint.index;
    // 从图表的原始数据中取出对应的Y轴数值
    const yValue = this.data.datasets[datasetIndex].data[dataIndex];
    console.log('点击的柱子对应的Y值：', yValue);
    
    // 额外福利：如果需要同时获取X轴标签（比如"2月"），可以这样写
    const xLabel = this.data.labels[dataIndex];
    console.log('对应的X轴标签：', xLabel);
  }
}

如果你用的是Chart.js 3.x及以上版本 #

3.x版本的API有一些变化，getElementAtEvent被替换成了getElementsAtEventForMode，写法调整如下：

onClick: function(evt) {
  const elements = this.getElementsAtEventForMode(evt, 'nearest', { intersect: true }, true);
  if (elements.length > 0) {
    const element = elements[0];
    const datasetIndex = element.datasetIndex;
    const dataIndex = element.index;
    const yValue = this.data.datasets[datasetIndex].data[dataIndex];
    console.log('点击的柱子对应的Y值：', yValue);
    const xLabel = this.data.labels[dataIndex];
    console.log('对应的X轴标签：', xLabel);
  }
}

为什么这个方法更可靠 #

直接从this.data里取数值，比依赖内部的_model属性更稳定——毕竟_model是Chart.js的内部变量，不同版本可能会有变化，而data是你传入的原始数据，永远是可靠的。

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