Chart.js 3 实现点击饼图切片获取对应数据值的方法咨询

你只需要调整options中两个配置项即可实现需求：

1. 修改interaction.mode为nearest，适配饼图扇形的点击识别
2. 补充onClick回调的入参，通过第二入参activeElements获取被点击的切片数据

修改后的完整代码如下：

chart = new Chart(thecomplexeschart, {
    type: 'pie',
    data: {
        labels: Object.keys(dataset),
        datasets: [{
            label: label,
            data: Object.values(dataset),
            hoverOffset: 4,
            backgroundColor: makeRandomColorsString(Object.keys(dataset).length),
        }]
    },
    options: {
        onClick: (e, activeElements) => {
            // 检测是否点击到了饼图切片
            if (activeElements.length > 0) {
                // 获取点击切片的下标
                const sliceIndex = activeElements[0].index;
                // 拿到对应的数据
                const sliceLabel = chart.data.labels[sliceIndex];
                const sliceValue = chart.data.datasets[0].data[sliceIndex];
                // 调用你的自定义函数，传入需要的参数
                yourCustomFunction(sliceLabel, sliceValue, sliceIndex);
            }
        },
        // 调整交互模式适配饼图
        interaction: {
            mode: 'nearest'
        },
        responsive: false,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                display: false
            },
            title: {
                font: {
                    size: 20,
                    weight: 'bolder'
                },
                display: true,
                text: label,
                padding: {
                    top: 10,
                    bottom: 30
                }
            }
        }
    }
});

说明：

• 如果点击位置没有落在切片上，activeElements会是空数组，加判断可以避免空值报错
• activeElements[0]中还包含了切片的位置、样式等信息，你可以按需取用
• 不需要额外引入插件或者监听原生canvas点击事件，直接用官方内置的回调即可适配所有Chart.js 3.x版本

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