JavaScript中如何获取Chart.js柱状图点击柱的数据集标签值

现有代码无法区分柱形所属数据集，是因为你读取的_index属性仅对应X轴分类的位置索引，同一X轴位置下supply、demand两类柱的_index值完全相同，自然无法做区分。

Chart.js 点击柱形返回的元素对象自带_datasetIndex属性，该属性值对应当前柱所属数据集在datasets数组中的下标，配合_index即可拿到点击柱的完整归属信息。
另外重复调用getElementAtEvent会产生不必要的性能消耗，建议将返回结果提前存入变量复用，同时增加空值判断避免点击图表空白区域时抛出报错。

替换原有onClick配置即可：

var option = {
    showLines: true,
    onClick: function(evt) {
        const activePoints = myLineChart.getElementAtEvent(evt);
        // 未点中柱形时直接返回
        if (!activePoints.length) return;
        const clickedPoint = activePoints[0];
        const categoryIndex = clickedPoint._index;
        const datasetIndex = clickedPoint._datasetIndex;
        // 提取所需信息
        const categoryName = data.labels[categoryIndex];
        const datasetName = data.datasets[datasetIndex].label;
        const value = data.datasets[datasetIndex].data[categoryIndex];
        
        console.log({
            分类: categoryName,
            所属数据集: datasetName,
            数值: value
        });
        alert(`当前点击柱属于${datasetName}，分类为${categoryName}，数值为${value}`);
    }
};

注：如果你后续升级到Chart.js 3.x及以上版本，getElementAtEvent方法已更名为getElementsAtEventForMode，你当前使用的2.x版本不受影响。

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