如何更简洁地获取vue-chartjs点击数据点的x、y轴数值

你原来的写法依赖了Chart.js内部私有属性，版本迭代容易失效，下面是更简洁稳定的实现方式：

核心优化点 #

• 直接用onClick回调自带的参数获取点击元素和图表实例，无需主动调用getElementAtEvent或者访问this._data._chart这类内部属性
• 避免访问_index、_datasetIndex这类下划线开头的私有变量，兼容性更强

优化后代码 #

ClickHandler: function(event, activeElements, chartInstance) {
    if (!activeElements.length) return
    const { index, datasetIndex } = activeElements[0]
    // 直接取值即可
    const xAxisValue = chartInstance.data.labels[index]
    const yAxisValue = chartInstance.data.datasets[datasetIndex].data[index]
    
    console.log('x轴数值：', xAxisValue)
    console.log('y轴数值：', yAxisValue)
},

你的options配置不需要做任何修改，直接替换ClickHandler逻辑即可，兼容Chart.js v2/v3以及对应版本的vue-chartjs。

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