ChartJS中如何检测点击位置是在柱状图柱条上还是柱条外区域

你可以直接使用ChartJS内置的onClick回调的第二个参数activeElements来判断是否点击到柱条：这个参数会返回当前点击位置命中的所有图表元素集合，点击到柱条时数组长度大于0，否则为0。

修改后的代码如下：

const waterFChart = new Chart(canvasRef.current, {
    plugins: [ChartDataLabels],
    type: "bar",
    data: {
        labels: ["Label 1", "Label 2", "Label 3", "Label 4", "Label 5"],
        datasets: [
            {
                label: 'Failures',
                type: "bar",
                data: [10, 20, 30, 41, 51],
                backgroundColor:"green",
                hoverBackgroundColor: darkBar,
            }
        ]
    },
    options:{
        // onClick回调接收三个参数：事件对象、命中的元素数组、当前图表实例
        onClick: function (e, activeElements) {
            if(activeElements.length > 0){
                // 命中柱条，可通过activeElements[0]获取对应柱条的关联数据
                alert("Clicked on bar")
            } else {
                alert("Clicked outside of the bar");
            }
        },
    }
});

补充说明 #

• 如果需要获取点击的具体柱条关联数据，可以直接从activeElements[0]中读取：
  • 对应x轴标签：activeElements[0].label
  • 对应数值：activeElements[0].parsed.y
  • 对应数据集配置：activeElements[0].dataset

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