如何在ChartJS环形图中实现单图例点击互斥功能

嘿，这个需求我之前刚做过，正好给你分享下具体的实现方案。核心就是重写ChartJS图例的点击事件，自定义单选逻辑，确保同一时间最多只有一个图例处于选中状态（对应系列显示）。

核心思路 #

ChartJS默认的图例点击事件是切换单个系列的显示/隐藏，我们需要替换这个逻辑：

• 当点击某个图例时，先判断当前点击的系列是否已经处于显示状态
• 如果当前系列是隐藏状态，就把另一个系列强制设置为隐藏，同时显示当前系列
• 如果当前系列已经显示，你可以选择两种行为：要么保持显示（强制至少一个选中），要么切换为隐藏（允许全不选），下面我会分别给出两种情况的代码

完整代码示例 #

情况1：强制单选（始终有一个图例处于选中状态）

// 获取画布上下文
const ctx = document.getElementById('doughnutChart').getContext('2d');
// 初始化环形图
const doughnutChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ['图例A', '图例B'],
        datasets: [{
            data: [40, 60],
            backgroundColor: ['#FF6384', '#36A2EB'],
            hoverBackgroundColor: ['#FF6384', '#36A2EB']
        }]
    },
    options: {
        legend: {
            onClick: function(e, legendItem) {
                const clickedIndex = legendItem.index;
                const chart = this.chart;
                const datasetMeta = chart.getDatasetMeta(0);

                // 遍历两个系列，实现单选逻辑
                datasetMeta.data.forEach((element, index) => {
                    if (index === clickedIndex) {
                        // 强制显示当前点击的系列
                        element.hidden = false;
                    } else {
                        // 隐藏另一个系列
                        element.hidden = true;
                    }
                });

                // 更新图表状态
                chart.update();
            }
        }
    }
});

情况2：支持取消选中（允许两个图例都处于未选中状态）

如果需要点击已选中的图例时，取消它的选中状态（两个都隐藏），只需要修改onClick里的逻辑：

onClick: function(e, legendItem) {
    const clickedIndex = legendItem.index;
    const chart = this.chart;
    const datasetMeta = chart.getDatasetMeta(0);
    const currentVisible = datasetMeta.data[clickedIndex].hidden !== true;

    // 先把另一个系列设置为隐藏
    datasetMeta.data.forEach((element, index) => {
        if (index !== clickedIndex) {
            element.hidden = true;
        }
    });

    // 切换当前点击系列的显示状态
    datasetMeta.data[clickedIndex].hidden = !currentVisible;

    chart.update();
}

关键细节说明 #

• legend.onClick：通过重写这个默认事件，完全自定义图例点击后的行为
• datasetMeta.data[index].hidden：ChartJS用这个属性控制系列的显示/隐藏，true为隐藏，false或null为显示
• 初始状态如果需要默认选中一个图例，可以在data.datasets[0]里给对应系列添加hidden: true（比如默认隐藏图例B，就给datasetMeta.data[1].hidden = true）

这样就能完美实现你要的“点击一个图例时，自动取消另一个已选中状态”的单选效果啦！

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